A Web Design Community curated by Chris Coyier

Code Snippets Gallery

Code Snippets > jQuery > Simple jQuery Accordion Submit one!

Simple jQuery Accordion

jQuery

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

HTML

<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>

CSS

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

13 Responses

  1. w1sh says:

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

  2. Thomas says:

    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;

    });
    });

  3. Thomas says:

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

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

  5. Is there a demo of this anywhere?

  6. Drizzy says:

    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 ?

  7. Rohan Merchant says:

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

    How can I use this with WordPress’ dynamic navigation?

  9. Beschi says:

    Thanks.
    This gives me some more ideas on accordion.

  10. Awesome! just what I was looking for!

  11. Kai says:

    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

  12. __fabrice says:

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

    Fabrice

Leave a Comment

Remember:
  • Be nice.
  • Wrap multiline code in <pre> and <code> tags and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>
* This website may or may not contain any actual CSS or Tricks.