Accordion Display Device #2

by bizamajig

HTML

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

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

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

<div class="toggle">Content</div>
<div  class="hidden hide">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() {
       var x= $(this).next();
       if(x.is(":visible")){
            x.fadeOut();
       }else{
           $(".hidden").fadeOut(); //to hide all
           x.fadeIn(); //to show the one you clicked on
       }
    });
});