Sidebar Menu Toggle Button on UMassp.edu

The sidebar navigation collapses at a breakpoint and the heading of "In this section" becomes a button that expands the div element containing the menu.

HTML

In Drupal, the menu is created with the core menu system and attached to the appropriate pages using Block Administration.  

The menu.html.twig template file contains the menu code, which builds the below HTML code.  A button element is the correct element to use here as the click immediately performs an action.

<aside class="section" role="complementary">
   <nav role="navigation" aria-labelledby="block-sidebarmenuuits-menu" id="block-sidebarmenuuits">
   
   		<h2 id="block-sidebarmenuuits-menu">In This Section</h2>
		<button id="submenu-toggle" class="">
			<span class="open-text">In This Section</span><span class="close-text">Close Section Nav</span>
		</button>
 
 	<div id="submenu">
          <ul id="block-sidebarmenuuits" class="clearfix menu menu--level-1">
              <li><a href="somelink">Some menu item</a></li>
              <li><a href="somelink">Some menu item</a></li>
              <li><a href="somelink">Some menu item</a></li>
              <li><a href="somelink">Some menu item</a></li>
          </ul>
	</div>
	
	</nav>
</aside>

CSS

This CSS all goes into effect at the breakpoint using media queries:

#sidebar_first .sidebar-navigation h2 { display: none; }

#submenu-toggle.on .open-text { display: none; }
#submenu-toggle:not(.on) .open-text { display: inline; }

#submenu-toggle:not(.on) .close-text { display: none; }
#submenu-toggle.on .close-text { display: inline; }

#submenu { display: none; }
#submenu-toggle.on + #submenu { display: block; }

Javascript

Very straightforward javascript swaps a class on click.

// JavaScript Document

var theToggle = document.getElementById('submenu-toggle');

theToggle.onclick = function() {
   toggleClass(this, 'on');
   return false;
}