Simple jQuery Accordion

Last updated on: February 2, 2012

jQuery

Make sure either to run on DOM ready or at the bottom of the page.

(function($) {
    
  var allPanels = $('.accordion > dd').hide();
    
  $('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);

HTML

<dl class="accordion">

<dt><a href="">Panel 1</a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>

<dt><a href="">Panel 2</a></dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>

<dt><a href="">Panel 3</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>

</dl>

SCSS

Sorry if you don't use SASS. Should be pretty easy to convert.

.accordion {
   margin: 50px;   
   dt, dd {
      padding: 10px;
      border: 1px solid black;
      border-bottom: 0; 
      &:last-of-type {
        border-bottom: 1px solid black; 
      }
      a {
        display: block;
        color: black;
        font-weight: bold;
      }
   }
  dd {
     border-top: 0; 
     font-size: 12px;
     &:last-of-type {
       border-top: 1px solid white;
       position: relative;
       top: -1px;
     }
  }
}

View Demo

Slightly more advanced, preventing closing of active panel:

View Demo

Comments

w1sh

# September 14, 2009

Thanks Chris. I was looking for a simple, lightweight alternative to all that jQueryUI jazz.

Reply ↓

Kevin

Permalink to comment# April 2, 2013

Great share, however both demos function the same (clicking a new panel closes the previous). I believe once of the demos should function with the ability to open multiple panels at once.

Thomas

# September 20, 2009

This works well with just tags, but what if I have an image included with a tag? I added in some lines of code, but now when I click on a div, the images appear/disappear but no content ( tags) show up.

Very odd……this is the code I used. Any help for someone learning Jquery would be appreciated greatly!

$(document).ready(function() {

$(‘#skills-services p:not(:first)’).hide();
$(‘#skills-services img:not(:first)’).hide();

$(‘#skills-services h3′).click(function(){

$(‘#skills-services p’).slideUp();
$(‘#skills-services img’).slideUp();
$(this).next(“p”).slideToggle(“normal”)
$(this).next(“img”).slideToggle(“normal”)
return false;

});
});

Reply ↓

Thomas

# September 20, 2009

I tried altering this code block to include images, but now only the images appear/disappear and the content ( tags) are nowhere to be seen.

Very odd, but here is the code I used. Any help would be greatly appreciated to someone new to Jquery.

$(document).ready(function() {
	
	$('#skills-services p:not(:first)').hide();
	$('#skills-services img:not(:first)').hide();

	$('#skills-services h3').click(function(){
	
		$('#skills-services p').slideUp();
		$('#skills-services img').slideUp();
 	    $(this).next("p").slideToggle("normal")
		$(this).next("img").slideToggle("normal")
        return false;

	});
});

Reply ↓

steve

Permalink to comment# September 18, 2012

use divs like:

.accordion {margin: 50px; position : relative; }

.dt, .dd {
padding: 10px;
border: 1px solid black;
border-bottom: 0;
&:last-of-type {
border-bottom: 1px solid black;} }

.a {
display: block;
color: black;
font-weight: bold; }

.dd {
border-top: 0;
font-size: 12px;
&:last-of-type {
border-top: 1px solid white;
position: relative;
top: -1px;
} }

$(function(){
(function($) {
var allPanels = $(‘.dd’).hide();
$(‘.a’).click(function() {
allPanels.slideUp();
$(this).parent().next().slideDown();
return false;
});
})(jQuery);
});

drizzy

# January 12, 2010

whoa never mind.. I didn’t close the tag

Reply ↓

Devin Walker

# January 12, 2010

Is there a demo of this anywhere?

Reply ↓

Drizzy

# January 16, 2010

is it possible for it to collapse more into sub heading as well?

So basically if you had a heading:

i.e.

> Major Attractions ‘you click that it drops down to’
> CN Tower ‘and when you click that it drops down
> ‘a short description of the CN tower’

is something like that possible ?

Reply ↓

Rohan Merchant

# March 29, 2010

I made one to slide up the next one when you click the same one… I’m sure there’s a cleaner solution but I cant figure it out. If you do post back thanks.


$.fn.equals = function(compareTo) { 
        if (!compareTo || !compareTo.length || this.length!=compareTo.length) 
{ 
                return false; 
        } 
        for (var i=0; i<this.length; i++) { 
                if (this[i]!==compareTo[i]) { 
                        return false; 
                } 
        } 
        return true; 
} 

$(document).ready(function($) {
		var whichOne = $('#accordion');
       $('#accordion dd').hide();
       $('#accordion dt a').click(function(){
       		if(whichOne.equals($(this))){
       			$('#accordion dd').slideUp();
       			$(this).parent().next().next().next().slideDown();
         		whichOne = $(this).parent().next().next().next();
            }else{
	            $('#accordion dd').slideUp();
	            $(this).parent().next().slideDown();
	            whichOne = $(this);
	            
            }
			return false;
       });
});

Reply ↓

Patrick

# April 28, 2010

How can I use this with WordPress’ dynamic navigation?

Reply ↓

Beschi

# May 26, 2010

Thanks.
This gives me some more ideas on accordion.

Reply ↓

Caleb Kester

# June 25, 2010

Awesome! just what I was looking for!

Reply ↓

Kai

# August 6, 2010

Hi, Thanks for the tutorial, just what iw as looking for.

Just 1 quick question, how would i make the tabs collapsible, so that all can be closed?

i have tried adding in ‘collapsible: true’ but to no avail.

Thanks

Reply ↓

Bert de Vries

# September 5, 2010

I did this:

$(document).ready(function($) {
       $('#accordion dd').hide();
       $('#accordion dt a').click(function(){
          if ($(this).hasClass('selected')) {
               $(this).removeClass('selected');
               $(this).parent().next().slideUp();
          } else {
               $('#accordion dt a').removeClass('selected');
               $(this).addClass('selected');
               $('#accordion dd').slideUp();
               $(this).parent().next().slideDown();
          }
          return false;
       });
});

Works for me…

Gr. Bert

__fabrice

# August 24, 2010

Hi,
To avoid the “jump” bug, just add : position : relative; on a parent div.

Fabrice

Reply ↓

Farid Hadi

Permalink to comment# September 6, 2012

position : relative; on the definition list itself would also do the trick and you that way you don’t need the extra div : )

dan

# September 16, 2010

i came up with an even simpler solution:
you don’t have to override the accordion click function because by calling accordion(“activate”, false) the all parts are closed (and hiding helps that this is not seen by the user). i also set collapsible to true… don’t know if thats necessary.

$(document).ready(function($) {
	// hide all content if the hash is null
	if (window.location.hash == "") {
		$("#accordion .content").hide();
		$("#accordion").accordion("activate" , false);
	}
});

Reply ↓

WebVeins.in

# September 30, 2010

It solved my problem.
Thanks a lot.
Keep rocking…

Reply ↓

Red

# October 27, 2010

Simple and effective!

Reply ↓

Ricardo Zea

# November 22, 2010

The best way to avoid page jumping is to not use dummy links (a href=”#” or a href=”") at all. a href’s have a lot of SEO weight so you may want to use them to actually link to other pages/sites, not to trigger behaviors.

To trigger behaviors you can use any other HTML link, yes, it will work, all you’d have to do is add “cursor:pointer;” to your CSS file and that’s it. And yes, this works in IE6 too.

So in Chris’s example above just replace:

with:

Reply ↓

Tim

Permalink to comment# September 4, 2012

Hey Ricardo,
good tip. I’m by *no* means a developer and am just learning this stuff.

How would you use the span?
<dt>\"How do you choose the coffee?\".</dt>
or
<dt>\"How do you choose the coffee?\".</dt>

And then swap
$('.accordion > dt > a').click(function() {
for
$('.accordion > dt > span').click(function() {

This is being used on maydaycoffee.com.au for FAQs.

Ruana

# November 30, 2010

Hi,

unfortunately the “jump” remains, at least in IE7, not matter whether one applies a position: relative; on a parent div or replaces the dummy links with real links or a spans – with which the indication that the lines are links is missing is not clear to the user. The headlines must unmistakable scream: Click me, I’m a link! to the users).

If anyone could come up with a solution to get rid of that nasty jump (in IE7 too) and post it here I’d be very grateful.

Reply ↓

adam

Permalink to comment# May 14, 2011

The return false should prevent the jump // but you can also the following: adding an event to the click function and then immediately preventing the default behavior /

function accordian(){

$(‘.accordian dd’).hide();
$(‘.accordian dt a’).click(function(event){ // <– add the event

event.preventDefault(); // <— prevent the jump
$('.accordian dt a').click(function(){

$('.accordian dd').slideUp();
$(this).parent().next().slideDown();

});

});

}

Paul

# January 2, 2011

Regarding the jump……

If the container which is being animated ( the dd) has margin or padding this seems to greatly increase the jump.

If you put your content inside a and put the padding on that instead of the , this seems to greatly reduce the jump.

Text

Reply ↓

Paul

# January 2, 2011

Ooops … hope this works :-/

&ltdd&rt&ltp&rtTEXT&lt/p&rt&lt/dd&rt

Reply ↓

Paul

Permalink to comment# January 2, 2011

No .. I’m obviously stupid :-/ Antway, just put the P inside the DD :-)

Richard

# February 12, 2011

I’ve been searching for a simple accordion script and this might just be the one. Others I’ve found are very convoluted but this one is nice and lightweight, thanks.

Reply ↓

Livepage

# April 15, 2011

here’s very simple and nice script – http://www.sebastiansulinski.co.uk/demos/jquery-accordion/

Reply ↓

Daryl

# April 16, 2011

Hey guys, this is great – on every browser except IE7.
I have tried every hack out there to get it to work but it’s just not working. Any hints?

Reply ↓

Daryl

Permalink to comment# April 17, 2011

I apologise, after hours of lost sleep I tried a new attack. It turns out the IE7 I had installed on my mac (using Winebottler) wasn’t loading ANY javascript and couldn’t be modified.
The script still works beautifully as intended.

Nicole

# May 10, 2011

great article

I using the following code

$(document).ready(function() {

/******************************************************************************************************************** SIMPLE ACCORDIAN STYLE MENU FUNCTION ********************************************************************************************************************/ $('div.accordionButton').mouseover { $('div.accordionContent > .acitem', this).show(); $('div.accordionContent > .acitem', this).prev().addClass('active'); $('div.accordionContent').slideUp('slow'); $(this).next().slideDown('slow');


	});
	/********************************************************************************************************************

	CLOSES ALL DIVS ON PAGE LOAD

	********************************************************************************************************************/

	$("div.accordionContent").hide();

});
now all the menu will closed at once, i want one menu should be open and remaining closed, how it can be achieved? or slow menu closing will also do.

Reply ↓

Biju Subhash

# June 8, 2011

thank you for sharing…
here an another link for another jquery accordion:
http://www.bijusubhash.com/blog/create-a-simple-accordion-with-jquery-and-css

Reply ↓

virus removal

Permalink to comment# April 26, 2012

OMG! i got it…. Thanks a ton.

png

# August 10, 2011

would like to know if you are still answering any of the comments in this thread, simple jquery accordian
thanks

Reply ↓

Xirc

# August 29, 2011

Great, simple, thanks!
Could you help to support cookies and remember open &ltdt>?

Reply ↓

Stephen McCann

# September 23, 2011

Hi there, is it possible to implement this menu with more than one dd tag? I understand it goes against definition lists… can I use li tags instead? Sorry I’m pretty new to jQuery, any help would be much appreciated. The list I’m trying to implement would have the structure:

Projects 
  - project1
- project2 
etc

Thanks guys!

Reply ↓

jamie paterson

Permalink to comment# March 29, 2012

Change them to DIV’s and put the lists inside mate. :-)

john

# October 14, 2011

thank. gracias desde colombia. me sirve muchisimo.

Reply ↓

Sam Pethers

# November 17, 2011

Thanks so much. Really clear article.

Reply ↓

Ion Ceban

# January 6, 2012

Thanks for the tutorial, it really help me a lot.

Reply ↓

Josh

# January 26, 2012

Im having a weird bug with this code as it is posted originally. If you click one of the menu items to expand it does expand but if you click the same menu item to close it, it bounces closed then open again.

Does anyone know how to turn this bounce off?

Reply ↓

PC Support Guy

# February 1, 2012

damn, i just spent an hour getting this to work but cant get rid of that annoying jump it does. read all these comments and still get the jump….ok back to the drawing board. there has to be something simpler out there.

Reply ↓

Marz

Permalink to comment# May 9, 2012

add position : relative; to .accordion class.. that fixes the jump
JSinger Internet Marketing

Permalink to comment# August 20, 2012

I confirm Marz’ fix. Thanks!

Ajay

# February 10, 2012

Great script..

Is there a way to get the first item in the accordion to be open on page load rather than hiding all?

Reply ↓

Chris

Permalink to comment# April 11, 2012

var allPanels = $(‘.accordion > dd’).hide().slice(1).show();

Bacca

# April 14, 2012

I’m having the same problem as Josh (01/26/2012)

Does anyone know how to turn this bounce off?

It would be nice to have the option to close the menu item you have just opened

Reply ↓

Mahmoud

# May 4, 2012

Hello !
Thanks for posting this amazing tut, its really simple, I was just need to know, is that possible to make this accordion work dynamic, for example if am working on eCommerce website and i have more than one item is that possible while am scrolling the accordion open panel for the item name something like giving order to accordion panel. Any help.
Sorry for my English. Thanks

Reply ↓

Davey

# May 31, 2012

@Josh and @Bacca – You can fix the bounce open and closed with this:

(function($) {

var allPanels = $(‘.accordion > dd’).hide();

$(‘.accordion > dt > a’).click(function() {
allPanels.slideUp();
if($(this).parent().next().is(‘:hidden’))
{
$(this).parent().next().slideDown();
}
return false;
});

})(jQuery);

Reply ↓

Bacca

# June 7, 2012

Hi Davey,

Thanks for taking time to look at this, unfortunately I tried this solution and it was unsuccessful .

When the page loads all the dds are open and clicking on the links in the dts does nothing?

Any ideas??

Reply ↓

Davey

# June 7, 2012

Hey Bacca,

If you copied and pasted from my previous comment, the formatting creates an improper ” ‘ ” character. I forked the previous demo on jsfiddle here:

http://jsfiddle.net/8MXAu/

Try that. I tested it on jsfiddle and it was fine. This would also assume that you are using the same HTML and CSS as the example.

Reply ↓

Jon

# June 7, 2012

Davey-

I just came across this demo. The original works fine except the “jump” your fix breaks completely. Any idea why that may be the case?

Reply ↓

Davey

# June 7, 2012

Hey Jon,

Check out the jsfiddle link here:
http://jsfiddle.net/8MXAu/

If you copied the fix from my previous comment, it does break because of an invalid ‘ character. Is that how you tested it?

Reply ↓

Bacca

Permalink to comment# June 8, 2012

Thanks Davey,

I had noticed the invalid character after I copied it, thought I had changed them all but must have missed one.

Anyway keyed in code from scratch (which i should have done in the first place) and it works perfectly, many thanks.
faris

Permalink to comment# September 19, 2012

thanks alot mate. your fix works. cheers

Zachattack

# July 10, 2012

This snippet helped me immensely. Thank you for sharing.

Reply ↓

max

# July 13, 2012

Not a jquery expert,

need to have several accordions in 6 columns any ideas how to do this? my js fiddle http://jsfiddle.net/FL7q3/

Reply ↓

Tim Smith

# July 19, 2012

This i great!
How do I only show one panel at a time?

Reply ↓

Tiffany Israel

# July 24, 2012

Any idea how to add a window.scrollTo? I’m not super proficient in Javascript/jQuery expert so I’m not sure where to put it.

Reply ↓

JHawes

# August 11, 2012

I tried this to allow for accordion tabs (dt) to be collapsible once opened:

$(document).ready(function($) {
       $('#accordion dd').hide();
       $('#accordion dt a').click(function(){
          if ($(this).hasClass('selected')) {
               $(this).removeClass('selected');
               $(this).parent().next().slideUp();
          } else {
               $('#accordion dt a').removeClass('selected');
               $(this).addClass('selected');
               $('#accordion dd').slideUp();
               $(this).parent().next().slideDown();
          }
          return false;
       });
});

Reply ↓

Chuck Ezuma

# August 11, 2012

This is one of the better accordion demonstrations. Nice and clean.

Reply ↓

# August 13, 2012

Nice tutorial…

Has anyone incorporated a [+] and [-] into this accordion, either by way of Javascript or images?

That would be really really cool if someone did…!

Reply ↓

Krish

Permalink to comment# September 4, 2012

Hi MP,

I did my accordion with Plus and Minus signs, but there is one small bug in it. When I click the icons are jumping. Is there any solution for the icons jumping?

Krish

Tim

# September 5, 2012

I could not get this working. Mainly as I am a n00b and didn’t know about swapping $ for jquery.
Also a bit of jquery lightbox wizardry I am using caused a conflict.

Here’s how it was fixed.

I got my mate whom I use for dev (and who kicks butt) to fix this and we have this working on maydaycoffee.com.au.

The jquery used is:

<script src='http://code.jquery.com/jquery-latest.js'></script>
								<script>
								jQuery(document).ready(function()
								{
									var allPanels = jQuery('.accordion > dd').hide();
									
								    jQuery('.accordion > dt > a').click(function()
								    {
								        allPanels.slideUp();
								        
								        if(jQuery(this).parent().next().is(':hidden'))
								        {
								            jQuery(this).parent().next().slideDown();
								        }
								        return false;
								    });
								});
</script>

CSS is below. I converted from SCSS. Like I said, I am not a dev/designer so my syntax and probably semanticism SUCKS.

.accordion dt, .accordion dd {
		padding: 5px;
      border: 1px solid #815611;
      border-bottom: 0; 
      font-family: inherit;
	  font-size: 0.9em;

      &:last-of-type {
        border-bottom: 1px solid black; 
		}
}

.accordion dt a, .accordion dd a
  {
        display: block;
        color: inherit;
        text-decoration: none;
        font-weight: bold;
      }

.accordion dd {

     border-top: 0; 
     font-size: inherit;
     &:last-of-type {
       border-top: 1px solid #815611;
       position: relative;
       top: -1px;
	}
}

.accordion dt{
color: #A90329;
  margin-top: 1em;
}

Reply ↓

quiet0ne

Permalink to comment# October 19, 2012

Awesome, this worked perfectly. Thank you for sharing that solution!

Vivek Moyal

# January 13, 2013

Awesome !!! cool code for making a very simple jquery accordion.

Reply ↓

Oimy

# May 23, 2013

god bless you, Chris!

Reply ↓

treehouse : what would you like to learn today?

Snippets

Simple jQuery Accordion

jQuery

HTML

SCSS

Comments

Leave a Comment