Make drop down menu clickable

Store Design
, ,

Topic summary

A user wants to modify their store’s category dropdown menu behavior. Currently, the dropdown only opens when clicking a plus icon, but they want it to also open when clicking the “Categories” text itself.

Proposed Solution:

  • Add JavaScript event listeners to make both the category text and plus icon trigger the dropdown
  • Use querySelectorAll to target menu items and toggle an ‘open’ class on click
  • Ensure the .menu-item class encompasses both the text label and icon elements

Current Status:

  • A community member provided sample JavaScript code and offered free implementation assistance if the original poster shares a collaboration code
  • The issue remains unresolved pending implementation
Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello guys,

I would like to make the categories section drop down when someone click. It currently only works when you click the plus next to it. But i want to be menu drop down also when you click categories, not just the plus next to it. Can anyone help me with this?

IMG_6756.jpeg
IMG_6756.jpeg1290×789 48.1 KB

IMG_6756.jpeg
IMG_6756.jpeg1290×789 53.3 KB

2

Hey @afcdigital ,

I see what you’re trying to do! To make the “Categories” section also trigger the dropdown when clicked (not just the plus icon), you’ll need to modify the event listener so that both elements toggle the submenu.

If you’re using JavaScript, something like this should work:

document.querySelectorAll('.menu-item').forEach(item => {
    item.addEventListener('click', function() {
        this.classList.toggle('open');
    });
});

Make sure that your .menu-item class includes both the text and the plus icon so that either one can trigger the dropdown.

If you’d like us to implement this for you, just email us the collab code, and we’d love to do it for free! :blush:

Let us know how it goes!
Shubham | Untechnickle