CODEWITHSUNDEEP
javascriptjqueryjquery-ui
stewart715
stewart715

Reputation: 5647

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 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/

Upvotes: 5

Views: 36559

Answers (3)

paparush
paparush

Reputation: 1348

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

        });
            }
    );

Upvotes: 1

Chris Rogers
Chris Rogers

Reputation: 1863

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.

Upvotes: 8

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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

Upvotes: 6

Related Questions