jQuery UI collapsible panel

Question

I notice on the jQuery UI theme roller website (left side), they have collapsible panels to group customization options for a custom jQuery UI package.

However, I don't see that collapsible panel anywhere in jQuery UI (seems odd to me!)

Does anyone know any collapsible panel options for jQuery like work like that (with the arrow and all)?

http://jqueryui.com/themeroller/

Answer 1

You do not need JQuery UI for this. Just straight old Jquery. They are often known as collaspable divs.

Attach a click event to the 'header' divs, which slides down/up the associated content div. To get the open/closed images, toggle a css class on the header to change image.

Answer 2

I think you're looking for accordion:

http://jqueryui.com/demos/accordion/

However, if you want multiple sections open, check out this part of the accordion documentation (overview):

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});

Or animated:

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();
});