I want to expand/collapse only one container at a time. When I click on first container second container should collapse and when second container expanded, first container should collapse automatically. Following is the Fiddle. Please guide... Thanks
http://jsfiddle.net/awaises/eK8X5/1138/
jQuery
$(".header").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(500, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
You can add this line to your click handler:
$(".header").not(this).text('Expand').next().slideUp();
You can find any expanded content
element and then collapse it like
$('.content').not($content).stop(true).filter(':visible').slideUp(500, function(){
$(this).prev().text('Expand')
})
Demo: Fiddle
Use this
$(".content").not($content).slideUp();
before you call the slideToggle function and ofcourse dont forget to update the text of the header
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.