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>
                <li><a href="#">Mission</a></li>
                <li><a href="#">History</a></li>
        <li class="firstLevel"><a href="#" class="dropDown">Pages</a>
                <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>
        <li class="firstLevel"><a href="#">Contact</a></li>

View the jQuery code

  $('#accordHolder ul > li ul')
  $('#accordHolder ul > li').click(function(){
    var selfClick = $(this).find('ul:first').is(':visible');
    if(!selfClick) {
        .find('> li ul:visible')
      .stop(true, true)