jQuery UI collapsible panel

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 col开发者_StackOverflow社区lapsible 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/

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");

        });
            }
    );