Multi-Toggle Pattern (Accordion)

If some or all of your menu items include submenus you can show them by default when the main menu is toggled open or you hide them by default and reveal them when the top level link is clicked.

Showing the submenu by default just needs some additional styling added and probably not a lot of explanation. This page shows and hides the submenu using an accordion pattern.

The HTML

The html is mostly the same as the html used for the toggle pattern. There are two additions. A submenu is added to the multi-toggle link and a couple of classes are added to the same link. Everything else should look familiar.

<label class="btn" for="toggle" onclick>Menu</label>
<input id="toggle" type="checkbox" />

<nav>
  <ul id="nav">
    <li><a href="">Back to Post</a></li>
    <li><a href="toggle.html">Toggle</a></li>
    <li class="current"><a href="multi-toggle.html" class="contains-sub multi">Multi-Toggle</a>
      <ul class="submenu">
        <li><a href="multi-toggle.html">Multi-Toggle Sublink 1</a></li>
        <li><a href="multi-toggle.html">Multi-Toggle Sublink 2</a></li>
        <li><a href="multi-toggle.html">Multi-Toggle Sublink 3</a></li>
      </ul>
    </li>
    <li><a href="toggle-slide.html">Toggle & Slide</a></li>
    <li id="close"><label for="toggle">Close</label></li>
  </ul>
</nav>

The Submenu CSS

As with the html, the css for the main menu and toggle button is the same as in the toggle demo so I won't show it here. The one exception is I've add a downward pointing triangle to the multi-toggle menu item using the :after pseudo selector.

Everything else below is for the submenu. Most is to style how the submenus look, but take note of the last two selectors that make use of the .open class. This class will get added and removed through javascript (jQuery) to open and close the submenu.

.multi:after {
  content: " \0025Bc";
  font-size: 0.5em;
}

#toggle:checked ~ nav #nav .submenu li,
#toggle:checked ~ nav #nav .submenu a {
  height: 0;
  line-height: 0;
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
      -ms-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
	}
	
#toggle:checked ~ nav #nav .submenu a {
  padding-left: 7%;
  background: #555;
}

#toggle:checked ~ nav #nav .submenu.open li,
#toggle:checked ~ nav #nav .submenu.open a {
  height: 3em;
  line-height: 3em;
}

The CSS in Media Queries

As with the toggle pattern there's little to see beyond styling in the media queries. The :after triangle on the multi-toggle link is removed by setting content: ""; The rest is converting the menu from vertical to horizontal and hiding and showing the submenu on :hover.

The Javascript to Open/Close the Submenu

The jQuery below finds the link with the accordion class applied (the mutli-toggle link) and adds a click event to override the link's default behavior.

Then it either adds or removes the open class to the submenu depending on it's current state. The link itself and the submenu, which is an unordered list, are both inside the top level list item making them siblings.

$(document).ready(function() {
  $('a.contains-sub').click(function() {
    if($(this).siblings('ul').hasClass('open')){
      $(this).siblings('ul').removeClass('open');
    } else {
      $(this).siblings('ul').addClass('open');
    }
    return false;
  });
});