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)?

/

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/

• javascript
• jquery
• jquery-ui

3 Answers 3

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.

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();
});

You are referring to the Accordion class. Here's how I use it PHP:

echo "<div class='accordion'>";
  echo "<H2>Event Details</H2>";
 echo "<p>". $row['eNotes']. "</p>";
echo "</div>";

Here's my bit of jQuery:

$(document).ready(

            function() 
            {

                // ACCORDIAN
                $(".accordion H2:first").addClass("active");
                $(".accordion p:not(:first)").hide();

                $(".accordion h2").click(function(){

                $(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");
                $(this).toggleClass("active");
                $(this).siblings("H2").removeClass("active");

        });
            }
    );