Menu Accordion: Hide/Show on click for sidebar menu items. Works in tandem with coordinated SCSS, posted to my gist account as menu-accordion.scss. Full menu can be seen in action here: http://www.leefoil.com/

menu-accordion.js

menuAccordion: function() {
	var subMenu = $('.main-mnu li.is-parent ul'); // Grab sub-menu element
	var parentLi = $('.main-mnu li.is-parent'); // Grab parent list item
	var collapsed = true; // Set to true on page load
	$(subMenu).addClass('collapsed'); // Hide sub-menu on page load

	if (parentLi) {		
		// Add <button> to parent, attaching expand/collapse icon with CSS
		$('.main-mnu li.is-parent>a').append('<button></button>');		

		$('.main-mnu li.is-parent button').on('click', function(e) {
			e.preventDefault(); // don't go to parent link page when expand button is clicked

			if (collapsed === true) {
				$(subMenu).removeClass('collapsed'); // If has class collapsed, switch to expanded
				$(subMenu).addClass('expanded');
				$(parentLi).addClass('expanded');
				$('.main-mnu li.is-parent button').addClass('expanded');
				collapsed = false; // Switch so collapse can be enabled on next click
			} else {				
				$(subMenu).removeClass('expanded'); // If has class expanded, switch to collapsed
				$(parentLi).removeClass('expanded');
				$('.main-mnu li.is-parent button').removeClass('expanded');
				$(subMenu).addClass('collapsed');
				collapsed = true; // Switch back, so expand can be enabled on next click
			} 
		});
	}
},