Super Simple Accordion

a jQuery example

by Mindy McAdams

HTML

<h1>Super Simple Accordion</h1>

<p>Click any panel.</p>

<!-- panels can be divs or any block element -->

<h2 id="b1">Panel 1</h2>
<p class="box one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis venenatis ornare. Fusce sit amet sapien sit amet orci lacinia ullamcorper. In hac habitasse platea dictumst. In non orci arcu. Nunc non felis a urna viverra ullamcorper eget sed lorem. Cras mauris diam, suscipit et malesuada in, adipiscing volutpat tortor.</p>

<h2 id="b2">Panel 2</h2>
<p class="box two">Cras id lorem eget ipsum cursus auctor. Phasellus sit amet mauris sit amet nisl porta consequat sed nec tortor. Integer vitae est at sem congue facilisis. Pellentesque gravida rhoncus lacinia. Morbi a diam a purus iaculis suscipit. Nam vitae tortor eget ante mollis consequat. Integer suscipit mauris non eros gravida sodales.</p>

<h2 id="b3">Panel 3</h2>
<p class="box three">Etiam et cursus quam. Phasellus ornare felis sed magna luctus nec pellentesque lacus tincidunt. Ut mauris eros, fringilla id placerat ac, pulvinar ut quam. Praesent eu diam nec magna volutpat semper vel nec neque. Aenean rhoncus commodo erat, a ultrices lorem pretium nec. Phasellus nunc tellus, suscipit sit amet dictum sed, sodales ut odio.</p>

<h2 id="b4">Panel 4</h2>
<p class="box four">Suspendisse risus sem, adipiscing suscipit elementum id, aliquam eget mi. Integer hendrerit velit vitae ipsum pharetra tincidunt. Cras nec urna nec nulla feugiat elementum ut at eros. Sed porttitor ligula non magna congue tristique. Phasellus in nunc nec turpis feugiat porttitor at sit amet metus. Praesent eleifend semper sem non ornare.</p>

CSS

body { 
    font-family: Calibri, sans-serif;
    margin: 0 10%;
    padding-bottom: 20px;
}
.box   { 
    margin: 0; 
    padding: 10px 20px; 
}
.one   { background: #ffbaa3; }
.two   { background: #ffe9ad; }
.three { background: #ca6996; }
.four  { background: #239d9a; }
h2 {
    margin: 0;
	padding: 4px 15px;
	background: #666;
	color: #fff;
    border-bottom: 2px solid #fff;
	}

JavaScript

// slideToggle() in a stack 

$(document).ready(function(){
    
    // start with all boxes hidden
    $('.box').hide();
        
    // make each gray bar open a certain box 
	$('#b1').on('click', function() {
		$('.one').slideToggle('fast');
	});
	$('#b2').on('click', function() {
		$('.two').slideToggle('fast');
	});
	$('#b3').on('click', function() {
		$('.three').slideToggle('fast');
	});
	$('#b4').on('click', function() {
		$('.four').slideToggle('fast');
	});    
    
    
});