accordion effect

Question

There are so many 'huge' accordion scripts around and I am confused.

Can anyone suggest me a simple code to turn this list into a accordion panel. To start with, only the 'Sports' list will be visible. Then when the user clicks on either Technology or Latest, the Sports will hide and the one clicked will show up and so on..

<ul id="accordion">
    <li>Sports</li>
    <ul>
        <li><a href="#">Golf</a></li>
        <li><a href="#">Cricket</a></li>
        <li><a href="#">Football</a></li>
    </ul>
    <li>Technology</li>
    <ul>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
    <li>Latest</li>
    <ul>
        <li><a href="#">Obama</a></li>
        <li><a href="#">Iran Election</a></li>
        <li><a href="#">Health Care</a></li>
    </ul>
</ul>

Answer 1

For something quick and simple you can use slideToggle() or slideUp() slideDown()

You might want to clean up your HTML so that the ULs are properly nested:

<ul id="accordion">
    <li>
        <h1>Sports</h1>
        <ul>
            <li><a href="#">Golf</a></li>
            <li><a href="#">Cricket</a></li>
            <li><a href="#">Football</a></li>
        </ul>
    </li>

    <li>
        <h1>Technology</h1>
        <ul>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
        </ul>
    </li>

    <li>
        <h1>Latest</h1>
        <ul>
            <li><a href="#">Obama</a></li>
            <li><a href="#">Iran Election</a></li>
            <li><a href="#">Health Care</a></li>
        </ul>
    </li>
</ul>

Then you could do something like this:

$(document).ready(function() {
  // initialise
  $('ul#accordion > li > ul').hide();
  $('ul#accordion > li:first-child > ul').show();

  // accordion
  $('ul#accordion > li > h1').click(function() {
     if($(this).next().css('display') == 'none') {
         $('ul#accordion > li > ul').slideUp();
         $(this).next().slideDown();
     }
  });
});

Answer 2

Here is my accordion menu, it is using almost similar markup as yours:

http://sarfraznawaz.wordpress.com/2010/03/09/creating-stylish-sliding-menu-with-jquery/

Answer 3

The jquery UI package comes with accordion functionality, if you're up to using that (UI is a pretty standard library for jquery, if a bit heavy-handed for some needs).