Collapse menu dropdown

Store Design
, ,

Topic summary

A user seeks to implement accordion-style menu behavior where only one dropdown menu remains open at a time. Currently, multiple menu dropdowns can be expanded simultaneously, and they want clicking a new menu item to automatically collapse any previously opened ones.

Proposed Solutions:

  • JavaScript approach: Detect menu clicks and check if another menu is already open. If so, programmatically hide it using JS—specific implementation depends on the HTML structure.
  • App recommendation: The Meteor Mega Menu app was suggested as a potential ready-made solution, with a reference example showing the desired accordion functionality.

The discussion remains open with no confirmed resolution or implementation details provided yet.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

how to collapse menu item dropdown when another menu item is clicked.

I want only one dropdown menu at a time open.

At the moment, multiple menu items can be opened at the same time. i want one to be open at a time, whenever one is clicked, the previous one collapses or is 'unclicked”.

2

Hello @GS-Web-Design ,

Tricky but yes possible with JS.

Idea is using JS you need to detect when a menu is clicked, Is there another menu is opened or not.

If yes using JS hide it, logic depends on the html.

Regards
Guleria

3

Hello :waving_hand:

If I’m understanding correctly, you’d like something like this [take a look at the “Amazon” template]? If that’s true, Meteor Mega Menu might be a good solution for you. If I’m missing the mark, I apologize.
I hope this helps :blush: