Simple jQuery Accordion

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

<dl id="accordion">

<dt><a href="">This is what you would click on to show the content</a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>

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

<dt><a href="">And Another</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>

#accordion { margin: 0; padding: 0; }
#accordion dd { margin: 0 0 5px 0; padding: 0; }

13 Responses

1. w1sh says:

   09/14/2009 at 8:02 am

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

   Reply
2. Thomas says:

   09/20/2009 at 6:49 pm

   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
3. Thomas says:

   09/20/2009 at 6:51 pm

   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
4. drizzy says:

   01/12/2010 at 8:45 am

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

   Reply
5. Devin Walker says:

   01/12/2010 at 11:03 pm

   Is there a demo of this anywhere?

   Reply
6. Drizzy says:

   01/16/2010 at 7:23 pm

   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
7. Rohan Merchant says:

   03/29/2010 at 6:53 am

   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
8. Patrick says:

   04/28/2010 at 1:04 pm

   How can I use this with WordPress’ dynamic navigation?

   Reply
9. Beschi says:

   05/26/2010 at 10:57 pm

   Thanks.
   This gives me some more ideas on accordion.

   Reply
10. Caleb Kester says:

    06/25/2010 at 8:39 am

    Awesome! just what I was looking for!

    Reply
11. Kai says:

    08/06/2010 at 3:23 am

    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
12. __fabrice says:

    08/24/2010 at 8:38 am

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

    Fabrice

    Reply