Expand only one mobile nav option at a time

Question

I have a Shopify mobile nav that currently expands all options at once. They must manually be collapsed, which creates an annoying user experience on mobile.

I am looking for any advice on modifying it so only one option expands at a time ('.mobile-nav__sublist-trigger is-active show-dropdown' is the link with multiple options).

Any help is appreciated!

<nav role="navigation">
  <ul id="MobileNav" class="mobile-nav post-large--hide">
          <a href="{{ routes.cart_url }}" class="cart-page-link mobile-cart-page-link">
        <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
        {{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
      </a>
    <form class="search" action="/search">
    <input type="text" placeholder="Search" name="q" value="{{ search.terms | escape }}"  />
    <input type="submit" value="Search" />
</form>
    {% for link in mobile-nav.links %}
      {% if link.links != blank %}
        {% assign parent_index = forloop.index %}
        <li class="mobile-nav__link" aria-haspopup="true">
          <a
            href="{{ link.url }}"
            class="mobile-nav__sublist-trigger"
            aria-controls="MobileNav-Parent-{{ parent_index }}"
            aria-expanded="false">
            {{ link.title | escape }}
            {% include 'mobile-nav-icons' %}
          </a>
          <ul
            id="MobileNav-Parent-{{ parent_index }}"
            class="mobile-nav__sublist">
            {% if link.type == 'collection_link' or link.type == 'blog_link' or link.url == routes.all_products_collection_url %}
              <li class="mobile-nav__sublist-link {% if link.active %}site-nav--active{% endif %}">
                <a href="{{ link.url }}" class="site-nav__link"{% if link.active %} aria-current="page"{% endif %}>{{ 'collections.sorting.all_tags' | t }} <span class="visually-hidden">{{ link.title | escape }}</span></a>
              </li>
            {% endif %}
            {% for childlink in link.links %}
              {% if childlink.links != blank %}
                {% assign child_index = forloop.index %}
            
                <li class="mobile-nav__sublist-link">
                  <a
                    href="{{ childlink.url }}"
                    class="mobile-nav__sublist-trigger"
                    aria-controls="MobileNav-Child-{{ parent_index }}-{{ child_index }}"
                    aria-expanded="false"
                    >
                    {{ childlink.title | escape }}
                    {% include 'mobile-nav-icons' %}
                  </a>
                  <ul
                    id="MobileNav-Child-{{ parent_index }}-{{ child_index }}"
                    class="mobile-nav__sublist mobile-nav__sublist--grandchilds">
                    {% for grandchildlink in childlink.links %}
                      <li class="mobile-nav__sublist-lin">
                        <a
                          href="{{ grandchildlink.url }}"
                          class="collapse"
                          {% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless%}>
                          {{ grandchildlink.title | escape }}
                         
                        </a>
                      </li>
                  
                    {% endfor %}
                  </ul>
                
                </li>
              
              {% else %}
                <li class="mobile-nav__sublist-link">
                  <a
                    href="{{ childlink.url }}"
                    {% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}>
                    {{ childlink.title | escape }}
                  </a>
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        </li>
      {% else %}
        <li class="mobile-nav__link">
          <a
            href="{{ link.url }}"
            class="mobile-nav"
            {% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
            {{ link.title | escape }}
          </a>
        </li>
      {% endif %}
    {% endfor %}

    {% if shop.customer_accounts_enabled %}
      {% if customer %}
        <li class="mobile-nav__link">
          <a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
        </li>
        <li class="mobile-nav__link">
          {{ 'layout.customer.log_out' | t | customer_logout_link }}
        </li>
      {% else %}
        <li class="mobile-nav__link">
          {{ 'layout.customer.log_in' | t | customer_login_link }}
        </li>
        <li class="mobile-nav__link">
          {{ 'layout.customer.create_account' | t | customer_register_link }}
        </li>
      {% endif %}
    {% endif %}

    <li class="mobile-nav__link">
      {% if section.settings.header_search_enable %}
        
      {% endif %}
    </li>
  </ul>
</nav>

Answer 1

Try this I did this for your "Shop" Submenus

$('.mobile-nav__link ul > li').click(function(){

  // Setting all the submenu hidden by default
  $('.mobile-nav__link ul > li').find('a').removeClass('is-active');
  $('.mobile-nav__link ul > li').find('ul').css({'display': 'none'});
  $('.mobile-nav__link ul > li').find('a').attr('aria-expanded', 'false');

  // Activating the current (clicked) submenu
  $(this).find('a').addClass('is-active');
  $(this).find('a').attr('aria-expanded', 'true');
  $(this).find('ul').css({'display': 'block'});

});