Accordion based on wordpress menu

Create an accordion on your basic wordpress menu without a plugin.

<div class="nav-menu">
	<?php
		wp_nav_menu( array(
			'menu' => 'Mobile Menu',
		) );
	?>
</div>
$('ul#menu-mobile-menu > li:has(ul)').addClass("has-sub");

  $('ul#menu-mobile-menu  > li > a').click(function() {
    var checkElement = $(this).next();
    
    $('ul#menu-mobile-menu  li').removeClass('active');
    $(this).closest('li').addClass('active');	 
    
    
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      $(this).closest('li').removeClass('active');
      checkElement.slideUp('normal');
    }
    
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
      $('ul#menu-mobile-menu  ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }
    
    if (checkElement.is('ul')) {
      return false;
    } else {
      return true;	
    }		
});

Hover Version

$('#secondary-menu li').hover(
	function() {
	$('ul',this).stop().slideDown(200);
  },
  function() {
    $('ul',this).stop().slideUp(200);
  }
);

Leave a Reply

Your email address will not be published. Required fields are marked *