jQuery Accordion

Accordion based off nested ULs that toggles when selected or a new LI is clicked.

by angelique

HTML

<ul id="accordion">
    <li><a>Item</a>
        <ul>
            <li><a href="#">sub item</a></li>
            <li><a href="#">sub item 2</a></li>
            <li><a href="#">sub item 3</a></li>
        </ul></li>
    <li><a>Item 2</a>
        <ul>
            <li><a href="#">sub item</a></li>
            <li><a href="#">sub item 2</a></li>
            <li><a href="#">sub item 3</a></li>
        </ul> </li>
    <li><a>Item 3</a>
        <ul>
            <li><a href="#">sub item</a></li>
            <li><a href="#">sub item 2</a></li>
            <li><a href="#">sub item 3</a></li>
        </ul> </li>
</ul>

CSS

#accordion li a {
    cursor:pointer;
    text-decoration:none;
}
#accordion li.selected {
    font-weight:bold;
}

JavaScript

$('#accordion ul').hide();
$('#accordion li a').click(function () {
   $(this).parent().toggleClass('selected');
   $(this).parent().children('ul').toggle('fast');
   $(this).parent().siblings().children('ul').hide('fast');
   $(this).parent().siblings().removeClass('selected');
});
$('#accordion .selected a').click(function () {
   $(this).parent().children('ul').toggle('fast');
   $(this).parent().toggleClass('selected');
});