simple accordion

by ataylor

HTML

<h3>Item 1</h3>
<p>Item 1 content</p>
<h3>Item 2</h3>
<p>Item 2 content</p>
<h3>Item 3</h3>
<p>Item 3 content</p>
<h3>Item 4</h3>
<p>Item 4 content</p>

CSS

p,h3 {margin: 0; padding: 0;}
p {height: 150px; width: 200px; border: 1px solid black;}
h3 {height: 50px; width: 200px; background-color: blue; color: white; border: 1px solid black;}

JavaScript

var headings = $('h3'),
    paras = $('p');
paras.hide().eq(0).show();
headings.click(function() {
    var cur = $(this); //save the element that has been clicked for easy referal
    cur.siblings('p').slideUp(); //hide all the paragraphs
    cur.next('p').slideDown(); //get the next paragraph after the clicked header and show it
})