Hey – if you’d like to avoid using the jQueryUI, this functionality isn’t too hard to write yourself. Here’s an implementation I’ve used several times that has seemed to work well…
// ACCORDION EFFECT
// The h2 must be followed by a div - no other divs can be used inside of "accordian"
$('#accordian h2').click(function(){
var clicked = $(this);
if ($(clicked).next().is(':hidden')) {
$('#program-descriptions h2')
.next()
.slideUp();
$(clicked)
.next()
.slideDown();
}
else
{
$(clicked)
.next()
.slideUp();
}
return false;
});
Then the HTML on the page would look like…
For the CSS, just add in a few properties to get things displaying correctly:
#accordion h2:hover {
cursor: pointer;
}
#accordion div {
display: none;
}
Obviously you can use whatever method you like, I’ve just found this one to work pretty well for me.