html
<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>
css
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;
}
jquery
$(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;
}
});
});
Very Easy Accordion With jQuery From Scratch
This is an accordion I wrote for a site a while back. I turn to this code every time I need a quick and easy accordion for a site.
Step 1
Here is what the html markup will look like, a header div then a div right after that will hold all of the content of the slide accordion.
<div class="accordion">
<div class="accord-header">Header 1</div>
<div class="accord-content">This is the content for the first header.</div>
<div class="accord-header">Header 2</div>
<div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
Step 2
Then to make it all work, we need to add this easy jQuery script.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".accordion .accord-header").click(function() {
if($(this).next("div").is(":visible")){
$(this).next("div").slideUp("slow");
} else {
$(".accordion .accord-content").slideUp("slow");
$(this).next("div").slideToggle("slow");
}
});
});
</script>
Step 3
The only CSS that is required for this to work properly is the following:
.accord-content { display: none; }
This just hides the content right off the bat, as soon as the page loads, then once the header div is clicked, you will see the content slide down.
