Question

I'm making collapsible/expandable divs, similar to accordions, where if I click a specific title, contents related to the title will appear. And if I click on a different title, previously opened contents will close before revealing the current contents for the recently clicked title, so that only one contents section is open at a time. I've got that sorted out.

<div class="container">
    <div class="title">ONE</div>
    <div class="content">Content One</div>
</div>
<div class="container">
    <div class="title">TWO</div>
    <div class="content">Content Two</div>
</div>
<div class="container">
    <div class="title">THREE</div>
    <div class="content">Content Three</div>
</div>
<div class="container">
    <div class="title">FOUR</div>
    <div class="content">Content Four</div>
</div>

However, I'm trying to make it so that all divs can be collapsed and all contents hidden. I'm having a really hard time figuring that part out. Here's what I have so far:

$(".title").click(function () {
    $content = $(this).next();
    if (!($content.is(":visible"))) {
        $(".content").slideUp("fast");
        $content.slideToggle(200);
    }
});

DEMO: http://jsfiddle.net/2skczuze/

I'm fairly new with Javascript so I can't figure out how to make an expanded div to collapse without opening another div.

Answer 1

Step1 :Collapse all content divs except the current one.

Step2 : Toggle the visiblility of the current content div.

$(".title").click(function () {
   $(".content").not($(this).next()).slideUp();
    $(this).next().slideToggle();
});

Fiddle

Answer 2

You can use:

$(".title").click(function () {
  $(this).next().slideToggle('fast').parent().siblings().find('.content').slideUp('fast');
});

Working Demo

Answer 3

Just add and else condition to your code :

$(".title").click(function () {
    $content = $(this).next();
    if (!($content.is(":visible"))) {
        $(".content").slideUp("fast");
        $content.slideToggle(200);
    } else {
        $content.slideToggle(200);
    }
});

JSFIDDLE: http://jsfiddle.net/ghorg12110/2skczuze/3/

Answer 4

Is this what you want? Just add an else block and toggle the element again.

Html

<div class="container">
   <div class="title">ONE</div>
   <div class="content">Content One</div>
</div>
<div class="container">
   <div class="title">TWO</div>
   <div class="content">Content Two</div>
 </div>
 <div class="container">
   <div class="title">THREE</div>
   <div class="content">Content Three</div>
</div>
<div class="container">
   <div class="title">FOUR</div>
   <div class="content">Content Four</div>
</div>

Css

.container {
width:300px;
margin-bottom:5px;
border:1px solid #d3d3d3;
text-align:center;
}

.container .title {
background-color:#00ffcc; 
width:auto;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
background-color: #f0f0f0;
display: none;
padding : 5px;
 }

Javascript

$(".title").click(function () {
$content = $(this).next();
if (!($content.is(":visible"))) {
    $(".content").slideUp("fast");
    $content.slideToggle(200);
}
else
{
    $content.slideToggle(200);
}
});

http://jsfiddle.net/2skczuze/1/

Answer 5

All you need is to extract one line of code from your if statement:

$(".title").click(function () {
    $content = $(this).next();
    $(".content").slideUp("fast"); // It is outside of if now
    if (!($content.is(":visible"))) {
        $content.slideToggle(200);
    }
});

Here is the Demo: http://jsfiddle.net/2skczuze/5/

Answer 6

Try this DEMO

Just add an if statement, when the next content is visible:

$(".title").click(function () {
  $content = $(this).next();
  if (!($content.is(":visible"))) {
    $(".content").slideUp("fast");
    $content.slideToggle(200);
  } else {
    $content.slideUp("fast");
  }
});

Answer 7

If you want to make an expanded div collapse without opening another div then can be do in this way

$(".title").click(function () {
    $content = $(this).next();
    if (($content.is(":visible"))) {
        $content.slideToggle(200);
    } 
    if (!($content.is(":visible"))) {
        $(".content").slideUp("fast");
        $content.slideToggle(200);
    }
});

Cannot hide all div contents

7 个答案: