How to Use the Accordion Widget in AJAX for HTML5 and CSS3 Programming - dummies

How to Use the Accordion Widget in AJAX for HTML5 and CSS3 Programming

By Andy Harris

Some of the most powerful jQuery tools are actually the easiest to use in HTML5 and CSS3 programming. The accordion widget has become an extremely popular part of the jQuery UI toolset.


Here, you see book headings. The details for the first one are available, but the other books’ details are hidden.


This marvelous effect allows the user to focus on a particular part of a larger context while seeing the overall outline. It’s called an accordion because the various pieces expand and contract to allow the user to focus on a part without losing place of its position. Collapsible content has become an important usability tool made popular by the system bar in Mac OS and other popular usability tools.

The accordion effect is strikingly easy to achieve with jQuery:

<!DOCTYPE html>
<html lang = "en-US">
 <meta charset = "UTF-8" />
 <link rel = "stylesheet"
  type = "text/css"
  href = "css/ui-lightness/jquery-ui-1.10.3.custom.css" />
 <script type = "text/javascript"
   src = "js/jquery-1.9.1.js"></script>
 <script type = "text/javascript"
   src = "js/jquery-ui-1.10.3.custom.min.js"></script>
 <script type = "text/javascript">
 function init(){
<h1>Accordion Demo</h1>
<div id = "accordion">
 <h2><a href = "#">Book I - Creating the HTML Foundation</a></h2>
 <li>Sound HTML Foundations</li>
 <li>It's All About Validation</li>
 <li>Choosing your Tools</li>
 <li>Managing Information with Lists and Tables</li>
 <li>Making Connections with Links</li>
 <li>Adding Images</li>
 <li>Creating forms</li>
 <h2><a href = "#">Book II - Styling with CSS</a></h2>
 <li>Coloring Your World</li>
 <li>Styling Text</li>
 <li>Selectors, Class, and Style</li>
 <li>Borders and Backgrounds</li>
 <li>Levels of CSS</li>
 <h2><a href = "#">Book III - Using Positional CSS for Layout</a></h2>
 <li>Fun with the Fabulous Float</li>
 <li>Building Floating Page Layouts</li>
 <li>Styling Lists and Menus</li>
 <li>Using alternative Positioning</li>

As you can see by looking over the code, it’s mainly just HTML. The effect is really easy to accomplish:

  1. Import all the usual suspects.

    You need to import the jQuery and jQuery UI JavaScript files, and a theme CSS file. You also need to make sure that the CSS has access to the images directory with icons and backgrounds because it will use some of these images automatically.

  2. Build your HTML page as normal.

    Build an HTML page as you would normally do. Pay attention to the sections that you want to collapse. There should normally be a heading tag for each element, all at the same level.

  3. Create a div that contains the entire collapsible content.

    Put all the collapsible content in a single div with an ID. You’ll be turning this div into an accordion jQuery element.

  4. Add an anchor around each heading you want to specify as collapsible.

    Place an empty anchor tag (<a href=”#”></a>) around each heading that you want to use as a collapsible heading. The sign indicates that the anchor will call the same page and is used as a placeholder by the jQuery UI engine. You can add the anchor directly in the HTML or through jQuery code.

  5. Create a jQuery init()function.

    Use the normal techniques to build a jQuery initializer.

  6. Apply the accordion() method to the div.

    Use jQuery to identify the div that contains collapsible content and apply accordion() to it:

     function init(){