Question

I am trying to implement a navigation menu that has a block of UL > LI within it:

<aside id="nav-container" role="complementary" style="width: 232px;">
  <nav class="overview" id="primary-nav" role="nav" style="display: block;">
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>The Basics</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">Introduction</a></li>
      <li><a href="#" class="nav-link">A Chapter in the Zeitgeist Movement</a></li>
      <li><a href="#" class="nav-link">Getting Real with expectations</a></li>
      <li><a href="#" class="nav-link">Point of Focus in a chapter</a></li>
    </ul>
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>Setting up a National Chapter</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">Gathering Volunteers &amp; Social Media</a></li>
      <li><a href="#" class="nav-link">Establishing a Website &amp; Tools</a></li>
      <li><a href="#" class="nav-link">Organising a Core Group</a></li>
      <li><a href="#" class="nav-link">Expanding into Regional Chapters</a></li>
    </ul>
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>Setting up a city or local Chapter</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">Introduction</a></li>
      <li><a href="#" class="nav-link">Getting Started</a></li>
      <li><a href="#" class="nav-link">Raising Volunteers</a></li>
      <li><a href="#" class="nav-link">Organising a Core Group</a></li>
    </ul>
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>Organising Events</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">Types of Events</a></li>
      <li><a href="#" class="nav-link">Finding a Space</a></li>
      <li><a href="#" class="nav-link">Gathering Materials</a></li>
      <li><a href="#" class="nav-link">Promoting the Event</a></li>
      <li><a href="#" class="nav-link">Executing the Event</a></li>
    </ul>
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>Organising Project Teams</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">“Your idea, your project” concept</a></li>
      <li><a href="#" class="nav-link">Guidelines</a></li>
      <li><a href="#" class="nav-link">Project Methodology</a></li>
      <li><a href="#" class="nav-link">Devising a Project Structure</a></li>
      <li><a href="#" class="nav-link">Organising Volunteers </a></li>
    </ul>
    <h3 class="section">
      <span class="menu-toggle"></span>
      <span>Appendix</span>
    </h3>
    <ul class="depth-1 shortcuts" style="display: none;">
      <li><a href="#" class="nav-link">Tips from Coordinators</a></li>
      <li><a href="#" class="nav-link">Tips on DVDs</a></li>
    </ul>
  </nav>
</aside>

Initially all the are closed, when I click on an h3, the ul list turns to

I have this javascript code:

  // menu open close
  this.leftMenuToggle = function () {
    var leftMenuToggle = $( ".section" ).on( "click", function( event ) {
      event.preventDefault();
      leftMenuToggle.toggleClass("active");
      leftMenuToggle.next().css('display', 'block');
      console.log('we clicked this menu item');
    });
  }

But it opens all the .section items, what is the correct way to alter my code so that if I click on … it opens only the child ul list?

Thanks

Answer 1

The following way you can remove the hardcoded style from your lists and when you click the link the list toggles.

Javascript

$('#nav-container').on('click', '.section', function(e) {
    e.preventDefault();

    var $shortcut = $(this).next();
    $('#nav-container ul.active').not($shortcut).removeClass('active');
    $shortcut.andSelf().toggleClass('active');
});

CSS

ul.active {
    display: block;
}

ul:not(.active) {
  display: none;
}

demo