Jquery simple accordion effect

Before Start

This is a simple jquery accordion effect. While searching for a simple jquery accordion effect, visited this page – http://docs.jquery.com/UI/Accordion. Here someone said, “An accordion doesn’t allow more than one content panel to be open at the same time, and it takes a lot of effort to do that….”. Then I saw this simple accordion effect try – http://css-tricks.com/snippets/jquery/simple-jquery-accordion/, but this will not give a complete accordion effect. But I have got an idea of making a simple accordion effect.

HTML – Understanding the Layout

Here we use dl, dt, dd tags (Definition List). Make the id of dl to accordion. The titles are in dt tags and the hidden content are in dd tags.

<dl id="accordion">
	<dt>Jquery</dt>
	<dd>A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.</dd>
	<dt>Accordion</dt>
	<dd>The accordion is a box-shaped musical instrument of the bellows-driven free-reed aerophone family, sometimes referred to as a squeezebox. A person who plays the accordion is called an accordionist.
	<br />It is played by compressing or expanding a bellows whilst pressing buttons or keys, causing valves, called pallets, to open, which allow air to flow across strips of brass or steel, called reeds, that vibrate to produce sound inside the body.</dd>
	<dt>Jquery Accordion</dt>
	<dd>An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this....
	<br />-docs.jquery.com</dd>
</dl>

JS – Understanding the script

We have some attributes for tags like name, id, style, etc. Using the attributes we can reduce so much of jquery code. Also note we can use our own attribute like “stus”, I have used in the following code. We can call it as an user defined attribute. I don’t know the effects of this type of attributes, but I use these to simplify the jquery code and it works. Take a look at this code…

$('#accordion dt').click(function(){
	cur_stus = $(this).attr('stus');
	if(cur_stus != "active")
	{
		//reset everthing - content and attribute
		$('#accordion dd').slideUp();
		$('#accordion dt').attr('stus', '');

		//then open the clicked data
		$(this).next().slideDown();
		$(this).attr('stus', 'active');
	}
	return false;
});

Here we check the status of the tag. If it is not active we reset all the tags, open the corresponding (next) dd tag and make the status of the dt to active. So, it works as an accordion.

By default we have to reset all the tags. So we add the code…

$('#accordion dd').hide();
$('#accordion dt').attr('stus', '');

To make the first data open by default we can add the lines…

$('#accordion dd:eq(0)').slideDown();
$('#accordion dt:eq(0)').attr('stus', 'active');

Done. Note, all the data can not be closed at a time. To make it we can add an else part…

$('#accordion dt').click(function(){
	cur_stus = $(this).attr('stus');
	if(cur_stus != "active")
	{
		//reset everthing - content and attribute
		$('#accordion dd').slideUp();
		$('#accordion dt').attr('stus', '');

		//then open the clicked data
		$(this).next().slideDown();
		$(this).attr('stus', 'active');
	}
	else
	{
		$(this).next().slideUp();
		$(this).attr('stus', '');
	}
	return false;
});

So the final script will be…

$(document).ready(function() {
	var cur_stus;
	
	//close all on default
	$('#accordion dd').hide();
	$('#accordion dt').attr('stus', '');
	       
	//open default data
	$('#accordion dd:eq(0)').slideDown();
	$('#accordion dt:eq(0)').attr('stus', 'active');

	$('#accordion dt').click(function(){
		cur_stus = $(this).attr('stus');
		if(cur_stus != "active")
		{
			//reset everthing - content and attribute
			$('#accordion dd').slideUp();
			$('#accordion dt').attr('stus', '');
			
			//then open the clicked data
			$(this).next().slideDown();
			$(this).attr('stus', 'active');
		}
		//Remove else part if do not want to close the current opened data
		else
		{
			$(this).next().slideUp();
			$(this).attr('stus', '');
		}
		return false;
	});
});

Here we can change the default open data and remove the else part if we don’t want to close all of them at a time.
Add some css for good looking.

Demo & Download

DEMO Here
Download Source

About these ads