How to make an accordion with jquery
Assuming that you have a div with id "switcher" and each panel of the accordian has the class of "switch" and that your accordion headers are h2's with a's in them, then:
$("#switcher .switch").hide();
$("#switcher .switch:first").show();
// wire up sidebar switcher
$("#switcher h2 a").click(function() {
var id = $(this).attr("href");
$("#sidebar .switch:not("+id+")").slideUp();
$(id).slideDown();
return false;
});
This is the matching html:
<div id="switcher">
<h2><a href="#one">One</a></h2>
<div class="switch" id="one">
<p>One</p>
</div>
<h2><a href="#two">Two</a></h2>
<div class="switch" id="two">
<p>Two</p>
</div>
<h2><a href="#three">Three</a></h2>
<div class="switch" id="three">
<p>Three</p>
</div>
</div>
This turned out to be way easier than I first thought.