Question

I need jQuery script that:

1. by default will shown only one active div others will be hide
2. only one active at moment (if click newly hidden div -> it opens and currently opened div will close)

I have some code and a demonstration:

HTML

<div class="toggle">Content</div>
<div  class="hidden hide">Content</div>
<div class="toggle">Content</div>
<div  class="hidden show">Content</div>

CSS

.toggle {width:398px; height:48px; cursor: pointer; border: 1px solid #000}
.hidden {width:300px; height:75px; background-color:#333333; margin-left:50px; text-indent:25px;}

.hide {display:none;}
.show {display:block;}

JavaScript

$(document).ready(function() {
    $(".toggle").click(function() {
       $('.active').not(this).toggleClass('active').next('.hidden').slideToggle(300);
       $(this).toggleClass('active').next().slideToggle("fast");
    });
});

http://jsfiddle.net/kolxoznik1/C7W2D/

Problem is that it doesn’t close previously opened div correctly when open new.

Answer 1

This should solve the problem.

It enables you to show and hide each div individually vs the snippet above that hides the previously open div.

$(document).ready(function() {
    $(".toggle").click(function() {
       $().next('.hidden').slideToggle(300);
       $(this).next().slideToggle("fast");
    });
});

Example here: http://jsfiddle.net/C7W2D/9/