Foldable jQuery UI panel

Question

I mark on the jQuery UI movie website (left) they have collapsible panels for grouping settings for the jQuery user interface package.

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

Does anyone know any legible panel options for jQuery similar to working (with arrow and all)?

http://jqueryui.com/themeroller/

Answer 1

I think you are looking for an accordion:

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

However, if you want to open several sections, 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();
});

Answer 2

JQuery. JQuery. div.

click div 'header', / div. / , css , .

Answer 3

You mean the Accordion class. This is how I use it with PHP:

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

Here is my jQuery bit:

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

        });
            }
    );