jQuery Accordion Made Easy

August 21, 2009

Having recently adding jQuery to my arsenal of web tools I've been experimenting with new ways of organizing content. While tabs is one obvious way of doing this (tutorial to come), my newly preferred method is the Accordion widget in jQuery UI.

It offers a nice flexible options and can be used for nearly all types of content. And the best part of this particular option has to do with the fact that the required code is very minimal and straightforward. Enjoy!

Step 1: Go ahead and download the following jQuery and jQuery UI libraries, as we'll need them for later use.

Step 2: At this point we are ready to get down to business and mark-up our content. For this example we're going to create a 3-section accordion. We'll start by adding our "accordion" div that will contain all 3 of our sections.

<div id="accordion">
  <div class="section">
    ...
  </div>
 
  <div class="section">
    ...
  </div>
 
  <div class="section">
    ...
  </div>
</div>

Step 3: Within each of our 3 sections we will have a heading that we always want displayed, and our content which will only be displayed when that section is active.

<div id="accordion">
  <div class="section">
    <h2>Section 1</h2>
 
    <div class="section-content">
      <p>some content</p>
    </div><!-- /.section-content -->
  </div><!-- /.section -->
 
  <div class="section">
    <h2>Section 2</h2>
 
    <div class="section-content">
      <ul>
        <li>some content</li>
        <li>more content...</li>
      </ul>
    </div><!-- /.section-content -->
  </div><!-- /.section -->
 
  <div class="section">
    <h2>Section 3</h2>
 
    <div class="section-content">
      <p>some content</p>
 
      <h3>Subhead</h3>
      <p>more content...</p>
    </div><!-- /.section-content -->
  </div><!-- /.section -->
</div><!-- /#accordion -->

NOTE: The  in the mark-up above are obviously not needed, but I find that it helps tremendously in identifying where you are at within your code, especially if you have a lot of it.

Step 4: Now that we have our content created, we need to make it functional. We'll start with some jQuery that will be used to let us know when the DOM is ready and then just add the accordion() method to our accordion id. I personally like to put this in a .js file but you can wrap it in <script> tags if you prefer.

$(function() {
  $("#accordion").accordion({
    autoHeight: false,
    header: 'h2'
  });
});

The "autoHeight" option allows you to set the height equal to each individual section (false) or set all of the sections to match the height of your tallest section (true). The "header" option determines which element you want to be the clickable element that expands that particular section. It can be any valid DOM element (i.e. div, img).

NOTE: You may notice I use the shorthand for $(document).ready(...). See my post on Still using $(docume).ready in your jQuery scripts? for more information. Also, if you are using jQuery in conjunction with other JavaScript libraries see my post Use of jQuery noConflict();.

Step 5 Last but not least we need to simply refer to the jQuery scripts and our custom script so it can interact with our HTML.

<head>
  ...
  <script type="text/javascript" src="files/jquery.js"></script>
  <script type="text/javascript" src="files/jquery-ui.js"></script>
  <script type="text/javascript" src="files/accordion.js"></script>
  ...
</head>

NOTE: The reference to "accordion.js" is the custom script from Step 4.

Bonus Step: No one wants to use the default browser styles, so I have taken the liberty and provided you some CSS. This version is included with the source files, so you can use the ones provided or edit them to fit your own personal needs.

#accordion {
  border: 1px solid #ccc;
  border-bottom: none;
  margin: 0 auto;
	width: 600px;
}
 
	#accordion .section {
		background: url(../images/accordion-bg.gif) repeat-x 0 0;
		border-bottom: 1px solid #ccc;
		padding: 12px;
	}	
 
	#accordion h2 {
		background: url(../images/plus.png) no-repeat 0 4px;
		cursor: pointer;
		font-size: 14px;
		outline: none;
		padding-left: 18px;
	}
 
	#accordion .ui-state-active {
		background: url(../images/minus.png) no-repeat 0 4px;
	}
 
	#accordion .section-content {
		padding: 0 18px;
	}
 
	#accordion h3 {
		border-bottom: 2px dotted #CCC;
		color: #666;
		font-size: 12px;
		font-weight: bold;
		padding: 22px 0 5px 0;
	}
 
	#accordion p {
		padding-top: 12px;
	}
 
	#accordion ol,
	#accordion ul {
		margin: 12px 0 0 40px;
	}
 
	#accordion li {
		padding-bottom: 5px;
	}

You're Done!

If you have any questions/comments about how something is done or how I can improve this further, I'd love to hear from you. Just post a comment below and I'll respond, if necessary.

Brandon R commented on Aug 22 2009 - 12:28pm #11

very simple code too - I'm totally going to use this in a couple places. Thanks, you rock!

Brandon R commented on Aug 22 2009 - 12:35pm #12

A really neat application of this would be to read from wordpress - and allow for like the top most 5 (or whatever number) of articles to be shown. I think I'm going to start working on it - If you care to shed any light that would be awesome. :D

erica commented on Dec 3 2009 - 2:58pm #13

Great tutorial and documentation. I have a question though, how do you set the accordion to be closed at start. I would like them to be closed instead of the first one being open. Any suggestions/help would be greatly appreciated!

Again thanks and great work!!

erica commented on Dec 3 2009 - 3:03pm #14

Nevermind, it was way easier than I thought! Thanks!!

rana commented on Dec 6 2009 - 3:55am #15

hi, nice tutorial. I have also written one of my own here:

http://ranacseruet.blogspot.com/2009/12/simple-accordion-using-jquery.html

without any kind of css coding(csss will be needed for formatting ui). Please check this out if you are interested...

Visitor commented on Aug 27 2010 - 1:56pm #16

This so good.
Thank you

watches commented on Sep 7 2010 - 5:33am #17

ccessful history. The five individually colored models of the Rado Ferrari Granturismo watches Ceramica Chronographs Collection are going to be manufactured in a omega watches very limited edition watch. Defined both by bold contemporary design replica watches and by mechanical complex, the timepieces reveal upgraded dials and designer replica watches ccessful history. The five individually colored models of the Rado swiss Gucci 112 Twirl watches Ceramica Chronographs Collection are going to be manufactured in a Swiss Army ST Collection replica very limited edition watch. Defined both by bold contemporary design swiss Cartier Tank watches and by mechanical complex, the timepieces reveal upgraded dials and Corum Coin replica watches ccessful history. The five individually colored models of the Rado Wyler replica watches Ceramica Chronographs Collection are going to be manufactured in a replica watches very limited edition watch. Defined both by bold contemporary design best watches replica and by mechanical complex, the timepieces reveal upgraded dials and Rolex Rolex Submariner

susan commented on Sep 8 2010 - 3:09am #18

fashion2010
In a word.I would just like to welcome http://www.just-nike.com/nike-air-jordan-c

-1.html">Nike Soccer Boot .A Fashion Genre! Among all brands of

handbags that are currently available in the market, one brand name that mostly catches

women's attention is http://www.cheap-wholesaler.com/gucci-accessories-wholesale-

5">air sneakers. No woman can deny this fact, since its classic design

and distinct color always come in style and fashion.As well as, Gucci watch ecommerce and cheap handbags wholesale
are considered as every woman's dream to own. Here has goods estore which will fulfill your

dream at an affordable price. Jushttp://www.just-nike.com/nike-air-jordan-c-

1.html">Nike Soccer Boot air sneakers ,It is very fit fot playing

basketball or running.you might as well for a try in the Cheap Coach in their Coach Outlet

Store.

reply Email this comment

Post new comment

Your name:

E-mail:

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.

Homepage:

Subject:

Comment: *

Web page addresses and e-mail addresses turn into links automatically.
Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><img>
You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <css>, <drupal>, <java>, <javascript>, <mysql>, <php>, <ruby>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA

This question is for testing whether you are a human visitor and to prevent automated spam submissions.