Accordion Made Easy

by Joe Saad

HTML

<h4>1st Paragraph</h4>
<p><b>1st content</b> Porttitor amet sagittis tortor rhoncus hac habitasse porta nisi augue vut? Tortor sed montes, mattis a amet velit magna. Turpis etiam dignissim pid, porta elit, phasellus elementum</p>
<h4>2nd Paragraph</h4>
<p><b>2nd content</b> Porttitor amet sagittis tortor rhoncus hac habitasse porta nisi augue vut? Tortor sed montes, mattis a amet velit magna. Turpis etiam dignissim pid, porta elit, phasellus elementum</p>
<h4>3rd Paragraph</h4>
<p><b>3rd content</b> Porttitor amet sagittis tortor rhoncus hac habitasse porta nisi augue vut? Tortor sed montes, mattis a amet velit magna. Turpis etiam dignissim pid, porta elit, phasellus elementum</p>
<h4>4th Paragraph</h4>
<p><b>4th content</b> Porttitor amet sagittis tortor rhoncus hac habitasse porta nisi augue vut? Tortor sed montes, mattis a amet velit magna. Turpis etiam dignissim pid, porta elit, phasellus elementum</p>

CSS

h4 {border:1px solid blue; background-color:#EAEAEA;cursor:pointer;margin:0px;}

JavaScript

$('p:not(:first)').hide();
$('h4').click(function() {
    $(this).next().slideToggle('fast');
    $('h4').not(this).next().slideUp('fast');
});