One menu open at a time?

One menu open at a time?

PoW8
Explorer
52 1 9

IMG_5011.png

 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

Replies 4 (4)

Diana_287
Shopify Partner
7 1 1

 

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.
Diana
PoW8
Explorer
52 1 9

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
Shopify Partner
3642 315 1344

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 )
    })
  })

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
PoW8
Explorer
52 1 9

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.