Demo 10 :: Accordions

Every website needs a navigation to be able to go from one page to another. If there is a side navigation, it can take up a lot of room with a whole bunch of links displayed all down the side of the page. JQuery can make it easy to tidy your page up a bit by using an accordian navigation. This will hide all the excess links that you don't need to have displayed until the user clicks on a main link. This is just an easier way of making a clean and cool looking page.

View the HTML code

<div id="accordHolder">
    <ul id="accordian">
        <li class="firstLevel" id="accordTop"><a href="#">Home</a></li>
        <li class="firstLevel"><a href="#" class="dropDown">About</a>
            <ul>
                <li><a href="#">Mission</a></li>
                <li><a href="#">History</a></li>
            </ul>
        </li>
        <li class="firstLevel"><a href="#" class="dropDown">Pages</a>
            <ul>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
                <li><a href="#">Page 4</a></li>
                <li><a href="#">Page 5</a></li>
            </ul>
        </li>
        <li class="firstLevel"><a href="#">Contact</a></li>
    </ul>
</div>

View the jQuery code

$(document).ready(function(){
  $('#accordHolder ul > li ul')
    .click(function(e){
      e.stopPropagation();
    })
    .hide();
    
  $('#accordHolder ul > li').click(function(){
    var selfClick = $(this).find('ul:first').is(':visible');
    if(!selfClick) {
      $(this)
        .parent()
        .find('> li ul:visible')
        .slideToggle();
    }
    
    $(this)
      .find('ul:first')
      .stop(true, true)
      .slideToggle();
  });
});