One menu open at a time?

[PoW8]

 Hey, anyone know how to make it so only one menu may be open at a time? Both can be closed but if one is already open, attempting to open another will close the currently open one.

printsofwhatever.com

pw: teunti

[Diana_287]

You're looking to implement this behavior on Shopify. You can achieve this by using Shopify's theme development tools and Liquid programming language.

Here's a general outline of the steps:

1. Create a JavaScript file: In your Shopify theme, create a new JavaScript file (e.g., menu-script.js) and add it to your theme's assets.
2. Add a class to menus: In your theme's Liquid template (e.g., header.liquid), add a class to the menu containers (e.g., menu-container) and a data attribute to identify each menu (e.g., data-menu-id="menu-1").
3. JavaScript code: In your menu-script.js file, use JavaScript to select the menu containers and add an event listener to the menu buttons. When a button is clicked, check if another menu is already open. If so, close it before opening the new menu.

[PoW8]

I’m actually quite lost on “2.” to be honest. I’ve never added a class and I’m not sure where or how it should be typed. I’ve been looking into articles and videos but I’m drawing a blank.

[tim]

I've refactored your JS code a bit  and added the required functionality:

  window.addEventListener('DOMContentLoaded', () => {
    if (window.matchMedia('(min-width: 750px)').matches) {
      return
    }

    const collapse = (heading) => {
      heading.classList.add('block-collapsed')
      heading.setAttribute('aria-expanded', 'false')
    }

    const expand = (heading) => {
      heading.classList.remove('block-collapsed')
      heading.setAttribute('aria-expanded', 'true')
    }

    const handleClick = (event) => {
      const heading = event.target
      if (heading.classList.contains('block-collapsed')) {
        headings.forEach(collapse)
        expand(heading)
      } else {
        collapse(heading)
      }
    }

    const headings = document.querySelectorAll('.grid .footer-block__heading');

    headings.forEach((heading, index) => {
      heading.setAttribute('role', 'button')
      heading.setAttribute('tabindex', '0')

      heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
      heading.setAttribute('aria-controls', `footer-block-index-${index}`)
      collapse( heading );

      heading.addEventListener('click', handleClick )
    })
  })

[PoW8]

Sorry for the late reply, I didn’t receive a notification til this morning. Exactly where do I paste this?

Edit: I attempted it in “global.js” and got inconsistent results. They both were possible of opening at the same time but closing one sometimes closed both. At times the button was unresponsive as well as trigger the wrong menu.