jQuery Accordion Made Easy

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!

download source filesview demo

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 <!-- comments --> 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.

download source filesview demo

Visitor's picture
Brandon R commented on #1

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

Visitor's picture
Brandon R commented on #2

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

Visitor's picture
erica commented on #3

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

Visitor's picture
erica commented on #4

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

Visitor's picture
Visitor commented on #6

This so good.
Thank you

Post new comment

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