Simple jQuery Accordion
http://vivekarora.com/blog/simple-jquery-accordion/
<div class="accordion">
<div class="accordion">
<div class="accordion-item">
Item 1
<div class="type"></div>
</div><div class="data">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div><div class="accordion-item">
Item 2
<div class="type"></div>
</div><div class="data">
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div><div class="accordion-item">
Item 3
<div class="type"></div>
</div><div class="data">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div></div><script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
body
body{font-family: Arial, Helvetica, sans-serif;
}
.accordion{width:100%;
min-height:300px;
margin:20px auto;
}
.accordion-item {font-size: 1em;
margin: 0 10px 0 10px;
padding: 10px;
height: 20px;
background: #f2f2f2;
border-bottom:1px solid #ccc;
color: #000;
cursor:pointer;
}
.accordion-item.open{background:#14ad40;
border-bottom:0px;
color:#fff;
}
.accordion-item.open .type {
float: right;
background: url('http://vivekarora.com/images/minus.png') center no-repeat;
padding: 10px;
}
.accordion-item .type {
float: right;
background: url('http://vivekarora.com/images/plus.png') center no-repeat;
padding: 10px;
}
div.data {
background: #fff;
margin: 0 10px 0 10px;
padding: 10px;
border:1px solid #ccc;
font-size: .8em;
line-height: 140%;
display:none;
}
$(function($) {
$(function($) {
var allAccordions = $('.accordion div.data');
var allAccordionItems = $('.accordion .accordion-item');
$('.accordion > .accordion-item').click(function() {
if($(this).hasClass('open'))
{$(this).removeClass('open');
$(this).next().slideUp("slow");
}
else {allAccordions.slideUp("slow");
allAccordionItems.removeClass('open');
$(this).addClass('open');
$(this).next().slideDown("slow");
return false;
}
});
});