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
This entry was posted in Jquery, Tutorial and tagged , , . Bookmark the permalink.

9 Responses to Jquery simple accordion effect

  1. lunedenuit says:

    thank you very much is very helpful

  2. cssProdigy says:

    This is great. Just what I was looking for

  3. zaniah says:

    you ROCK, this is exactly what I was looking for, is fully customizable. YOU are amazing.
    so simple, so clean!!

    Thanks
    Zaniah

  4. Nick says:

    This is great and almost exactly what I am looking for. Is there a way to make the accordion close on mouseout?

  5. sutwala says:

    I tried and tried and tried. It’s just not happening. I am sure I am missing something, but I’ve already pulled all hair from my head.

  6. sutwala says:

    ok. it worked. thnx everyone!

  7. iConnect says:

    Could you advise as to where one would add “animate” to change the easing of the accordion’s animation? Is this possible? Thanks.

    • iConnect says:

      Nevermind, I figured it out! (Maybe you could merge this comment with my last.)

      $(this).next().slideDown(500, “easeOutBounce”);
      $(this).attr(‘stus’, ‘active’);

      For all slideDown/Up methods I added a duration (500) and an easing function (easeOutBounce). Of course, I had to include the proper jquery-ui file for the easing, but it works great.

      Thanks!

  8. Heather says:

    “Jquery simple accordion effect | Beschi’s Works” really got myself simply addicted on your webpage! Iwill certainly be back even more often. Thanks a lot ,Luella

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s