Accordian Panels

Click on each blue bar to reveal or hide the content within each section.

Step 1

First, set up your HTML, with separate divs for the separate panels you want to show. Use CSS to stylize.

Step 2

Next, write your javascript out in a separate file


// hide all the content panes when the page loads
$('.accordian > div').hide();

// first pane to be visible by default
$('.accordian > div:first').show();

// Store the h3 elements so that jQuery does not have to keep selecting them
// everytime the h3 tag is clicked
var accordianReveal = $('.accordian h2');

accordianReveal.click(function() {
    	$(this).next().animate({
    	'height':'toggle'
    	}, '300');
});

Step 3

Lastly, attach your javascript files to your page


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/accordian.js"></script>