Accordion Display Device

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() {
         $(".hidden").hide(); //to hide all
        $(this).next().fadeIn(); //to show the one you clicked on

    });
});