Accordion with jQuery and CSS

The jQuery accordion plugin works with nested lists or just nested divs. There are also some options available to specify the structure, the active element (to display at first) and to customize animation.

This plugin will come in handy when you are dealing with orgonizing a good chuck of content.

HTML Markup

In this markup I’m using nested divs, an <h3> is the heading of accordion items and a nested <div class="container_accordion"> to show the content of each item.

<h3 class="click_accordion"><a href="#">Web Design</a></h3>
<div class="container_accordion">
  <div class="content_accordion">
    <h2>Custom Website Designs</h2>
    <p>If your looking for a fresh eye-catching custom website design then we can develop a professional high quality website for you which is designed to your exact specifications.</p>
    <p>Great websites do not need to cost an arm and a leg. Our process is that of getting to know your business and proposing the best fit for you in terms of features and budget, while never compromising on quality. We simply enjoy creating beautiful websites. Find out more about our services.</p>
    <p>Do you require a world class corporate site, a friendly welcoming community site, or even something just plain funky? Whatever your design requirements, our design and development team caters for all audiences and markets. We have a wide range of designers at our disposal all from a variety of different design backgrounds, offering you a unique and beautifully designed website. </p>
    </div>
</div>

CSS

h3.click_accordion {
	padding: 0;
	margin: 0 0 5px 0;
	background: url(../images/h2-bg.png) no-repeat;
	height: 46px;	line-height: 46px;
	width: 500px;
	font-size: 2em;
	font-weight: bold;
	float: left;
}

h3.click_accordion a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0 0 0 35px;
}

h3.click_accordion a:hover {
	background: url(../images/h2-bg.png) no-repeat;
	background-position: 0 -46px;
}

h3.active {
	background-position: 0 -92px;
}

.container_accordion {
	margin: 0 0 5px;
	padding: 0;
	overflow: hidden;
	font-size: 1.2em;
	width: 498px;
	clear: both;
	background: #f0f0f0;
	border: 1px solid #d6d6d6;
	-webkit-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-moz-border-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.container_accordion .content_accordion {
	padding: 20px;
}

Setting up jQuery

You can download jQuery from the jQuery site, or you can use the hosted one on Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Directly after you called your jQuery, start a new <script> tag and start your code by using the $(document).ready event.

<script type="text/javascript">
$(document).ready(function(){

//open/close settings -- set default
$('.container_accordion').hide(); //Hiding and closing the containers
$('.click_accordion:first').addClass('active').next().show(); //Add "active" class to first item, then show/open next container

//On/Click
$('.click_accordion').click(function(){
	if( $(this).next().is(':hidden') ) {
		$('.click_accordion').removeClass('active').next().slideUp();
		$(this).toggleClass('active').next().slideDown();
	}
	return false;
});

});
</script>

View Demo