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");
});
}
);
精彩评论