CODEWITHSUNDEEP
jquery
Awais Imran
Awais Imran

Reputation: 1344

Expand/Collapse Issue

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

Upvotes: 0

Views: 71

Answers (3)

Nish Rathi
Nish Rathi

Reputation: 254

Use this 

$(".content").not($content).slideUp();

before you call the slideToggle function and ofcourse dont forget to update the text of the header

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 0

Felix
Felix

Reputation: 38102

You can add this line to your click handler:

$(".header").not(this).text('Expand').next().slideUp();

Updated Fiddle

Upvotes: 2

Related Questions