Expand and collapse div

Question

The expand and collapse functionality is currently working fine but I'd like to modify the functionality so when I click on Expand 1, and then click on Expand 2, that Expand 1 should collapse automatically. This means that only one div is allowed to be expanded at once while all the others should remain collapsed.

HTML:

<div class="container">
<div class="header"><span>Expand 1</span>

</div>
<div class="content">
    <ul>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
    </ul>
</div>

 <div class="header"><span>Expand 2</span>

</div>
<div class="content">
    <ul>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
    </ul>
</div>

CSS

.container {
width:100%;
border:1px solid #d3d3d3;
 }
.container div {
 width:100%;
 }
.container .header {
 background-color:#d3d3d3;
 padding: 2px;
 cursor: pointer;
 font-weight: bold;
 }
 .container .content {
 display: none;
 padding : 5px;
  }

Jquery

$(".header").click(function () {

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $header.text(function () {
        //change text based on condition
        return $content.is(":visible") ? "Collapse" : "Expand";
    });
});

});

Example..

http://jsfiddle.net/eK8X5/8290/

Answer 1

You can do,

$(".header").click(function () {
    $header = $(this);
    $content = $header.next();
    $(".content").not($content).slideUp().prev().text("Expand");
    $content.slideToggle(500, function () {
        $header.text(function () {
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Fiddle

• Collapse all, except the current one using the code $(".content").not($content).slideUp().prev().text("Expand");

Answer 2

First you need to collapse other if any already expanded. I updated jsfiddle and it is working now. jsfiddle Try this:

$(".header").click(function () {

CollapseAll(this);    

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $header.text(function () {
        //change text based on condition
        return $content.is(":visible") ? "Collapse" : "Expand";
    });
});

});

function CollapseAll(obj){
$(".header").each(function(i, item){
    var that = $(this);
    if($(this).next().is(":visible") && this != obj){
        $(this).next().slideToggle(500, function () {
            //execute this after slideToggle is done
            //change text of header based on visibility of content div
            that.text(function () {
            //change text based on condition
            return that.next().is(":visible") ? "Collapse" : "Expand";
            });
        });
    }
});
}

Answer 3

You have to select the content sections of headers that were not clicked and slide them up. Something like:

$(".header").click(function () {
    $header = $(this);
     //getting the next element
     $content = $header.next();
     //toggle other content area slides
    var notClicked =  $('.header').not(this).next().slideUp(500);
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
         //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
             return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });
});

Answer 4

You can add these two lines in your JS code to achieve desired result.

$contents = $(".header").not(this).next();
$contents.filter(":visible").slideUp(500).prev().text("Expand");

So complete JS code

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

    // Get all content panels and Hide them
    $contents = $(".header").not(this).next();
    $contents.filter(":visible").slideUp(500).prev().text("Expand");

});

The idea is to select all header elements excluding this clicked header and if they are visible hide them.

Hope this helps.

Answer 5

You can add this to the end of your click code. It collapses all of the siblings then performs your text check after the collapse.

Fiddle

$header.siblings(".header").each(function(index,obj){
    header = $(obj);
    content = header.next();
    content.slideUp(500, function(){
        header.text(function () {
            return content.is(":visible") ? "Collapse" : "Expand";
        });             
    });

});