• Home
• ajax
• CSS
• Freebies
• How-To
• jQuery
• Php
• Web Design
• Web Hosting
• Wordpress

The beauty of jQuery is that we can create complex things in minimal code. We don’t need to be an expert javascript coder for creating complex widgets. Here is a simple way to create accordion control of your own. You can style up this widget per your requirements. Here are the steps.

Here is a demo

Include jQuery in your header (I am using path from jQuery.com)

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

Now Create CSS rules for main accordion container , title links and accordion sections (put it between header tags too or in your stylesheet file)

<style type="text/css">

/* Main accordion container */
.accordion{
width:500px;
}

/* accordion content div, default display is hidden */
.accContent{
display:none;
border:1px solid #CCCCCC;
padding:3px;
}

/* Title links (clickable to show their content and hide others) */
.acctitle{
display:block;
width:100%;
padding:3px 3px 3px 3px;
background-color:#CC0000;
color:#FFFFFF;
cursor:pointer
}

/* Default accordion class (usually first one so it is always visible) */
.defaultAccordion{
display:block;

}
</style>

Now define the html elements as below (in your body tags wherever you want to display accordion)

<div class="accordion">
    <a class="acctitle" ref="first_section">First Section</a>
    <div class="accContent defaultAccordion" id="first_section">
	<p>First Accordion Section</p>
    </div>

    <a class="acctitle" ref="second_section">Second hidden Section</a>
	<div class="accContent" id="second_section">
		<p>2nd Accordion Section</p>
	</div>

    <a class="acctitle" ref="third_section">Third Hidden Section</a>
	<div class="accContent" id="third_section">
		<p>last Accordion Section</p>
	</div>
</div>

Make sure ref of each anchor must match with the id of its accordion content, otherwise script will not work.

Now Add following code in between header tags finally.

<script type="text/javascript">
$(function(){
	// loop though each link
	$("a.acctitle").each(function(){
		// add an event on click
		$(this).click(function(){
			// hide all div's with accContent class
			$(".accContent").each(function(){
				$(this).hide("slow");
			});

			// the main point of this script - Fetch ref attribute of
			// title link and display the hidden div with that id
			$("#"+$(this).attr("ref")).show("slow");
				return;
			  });
	});
});
</script>