(For more resources on jQuery, see here.)
Each container has a heading element associated with it that is used to open the container and display the content. When you click on a heading, its content will slide into view (with an animation) below it. The currently visible content is hidden, while the new content is shown whenever we click on an accordion heading.
The accordion widget is a robust and highly configurable widget that allows you to save space on your web pages, by displaying only a single panel of content at any time. The following screenshot shows an example of an accordion widget:
It’s easy for our visitors to use and easy for us to implement. It has a range of configurable options that can be used to customize its appearance and behavior, and exposes a series of methods that allow you to control it programmatically. It also comes with a rich set of interaction events that we can use to hook into key interactions between our visitors and the widget.
The height of the accordion’s container element will be set automatically, so that there is room to show the tallest content panel in addition to the headers. Also, by default, the size of the widget will remain fixed, so that it won’t push other elements on the page around it out of the way, when content panels open or close.
Accordion’s structure
Let’s take a moment to familiarize ourselves with the underlying markup that an accordion is made of. Within the outer container is a series of links. These links are the headings within the accordion and each heading will have a corresponding content panel that opens when the header is clicked.
It’s worth remembering that only one content panel can be open at a time when using the accordion widget. In a blank page in your text editor, create the following page:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet”
href=”css/smoothness/jquery-ui-1.8.9.custom.css”>
<title>Accordion
</title>
</head>
<body>
<div id=”myAccordion”>
<h2>
<a href=”#”>Header 1
</a>
</h2>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean sollicitudin. Sed interdum pulvinar justo.
Nam iaculis volutpat ligula. Integer vitae felis quis
diam laoreet ullamcorper.
</div>
<h2>
<a href=”#”>Header 2
</a>
</h2>
<div>Etiam tincidunt est vitae est. Ut posuere, mauris at
sodales rutrum, turpis tellus fermentum metus, ut
bibendum velit enim eu lectus. Suspendisse potenti.
</div>
<h2>
<a href=”#”>Header 3
</a>
</h2>
<div>Donec at dolor ac metus pharetra aliquam.
Suspendisse purus. Fusce tempor ultrices libero. Sed
quis nunc. Pellentesque tincidunt viverra felis.
Integer elit mauris, egestas ultricies, gravida vitae,
feugiat a, tellus.
</div>
</div>
<script
src=”development-bundle/jquery-1.3.2.js”>
</script>
<script
src=”development-bundle/ui/ui.core.js”>
</script>
<script
src=”development-bundle/ui/ui.accordion.js”>
</script>
<script>
$(function() {
$(“#myAccordion”).accordion();
});
</script>
</body>
</html>
Save the file as accordion1.html in the jqueryui folder, and try it out in a browser. The widget should appear as it did in the screenshot at the start of the article, fully skinned and ready for action.
The following list shows the required dependencies of the widget:
- jquery.ui.all.css
- jquery-x.x.x.js
- jquery.ui.core.js
- jquery.ui.accordion.js
Each widget also has its own source file, and may depend on other components as well. For example, we could include some effect files to use non-standard animations on the opening accordion panels.
The order in which these files appear is important. The jQuery library must always appear first, followed by the jquery.ui.core.js file. After these files, any other files that the widget depends upon, should appear before the widget’s own script file. The library components will not function as expected if files are not loaded in the correct order.
The underlying markup required for the accordion is flexible, and the widget can be constructed from a variety of different structures. In this example, the accordion headings are formed from links wrapped in <h2> elements, and the content panels are simple <div> elements.
For the accordion to function correctly, each content panel should appear directly after its corresponding header. All of the elements for the widget are enclosed within a container <div> that is targeted with the accordion() widget method.
After the required script dependencies from the library, we use a custom <script> block to transform the underlying markup into the accordion.
To initialize the widget, we use a simple id selector $(“#myAccordion”), to specify the element that contains the markup for the widget, and then chain the accordion() widget method after the selector to create the accordion.
In this example, we used an empty fragment (#) as the value of the href attribute in our tab heading elements, such as:
<h2><a href="#">Header 1</a></h2>
You should note that any URL supplied for accordion headers will not be followed, when the header is clicked in the default implementation.
Similar to the tabs widget, the underlying markup that is transformed into the accordion has a series of classnames added to it, when the widget is initialized.
A number of different elements that make up the widget are given role and aria- attributes. ARIA stands for Accessible Rich Internet Applications and is a W3C recommendation for ensuring that rich-internet applications remain accessible to assisted technologies.
The accordion panels that are initially hidden from view are given the attribute aria-expanded=”false” to ensure that screen readers don’t discard or cannot access content that is hidden using display:none. This makes the accordion widget highly accessible.
Styling the accordion
ThemeRoller is the recommended tool for choosing or creating the theme of the accordion widget, but there may be times when we want to considerably change the look and style of the widget beyond what is possible with ThemeRoller. In that case, we can just style our own accordion.
In a new page in your text editor add the following code:
#myAccordion {
width:400px; border:1px solid #636363; padding-bottom:1px;
}
.ui-accordion-header {
border:1px solid #fff;
font-family:Georgia; background:#e2e2e2 none;
}
.ui-widget-content { font-size:70%; border:none; }
.ui-corner-bottom {
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
border-radius:4px 4px 0 0;
}
.ui-corner-all {
-moz-border-radius:0; -webkit-border-radius:0;
border-radius:0;
}
.ui-accordion .ui-accordion-header { margin:0 0 -1px; }
#myAccordion .ui-state-active, #myAccordion .ui-widget-content
.ui-state-active { background:#fff; } .ui-state-hover,
.ui-widget-content .ui-state-hover { background:#d2d2d2;
}
Save this file as accordionTheme.css in the css folder, and link to it after the jQuery UI style sheet in the <head> of accordion1.html:
<link rel="stylesheet" href="css/accordionTheme.css">
Save the new file as accordion2.html in the jqueryui folder and view it in a browser. It should appear something like this:
As you can see from this screenshot, we’ve disabled the built-in rounded corners that are added by the theme file and have set alternative fonts, background colors, and border colors.
We haven’t changed the widget much, but we haven’t used many style rules. It would be easy to continue overriding rules in this way to build a much more complex custom theme.
Configuring an accordion
The accordion has a range of configurable options that allow us to change the default behavior of the widget. The following table lists the available options, their default values, and gives a brief description of their usage:
| Option | Default value | Used to… |
| active | first child (the first panel is open) | Set the active heading on page load. |
| animated | slide | Animate the opening of content panels. |
| autoHeight | true | Automatically set height according to the biggest drawer. |
| clearStyle | false | Clear the height and overflow styles after a panel opens. |
| collapsible | false | Allow all of the content panels to be closed at the same time. |
| disabled | false | Disable the widget. |
| event | click | Specify the event on headers that trigger drawers to open. |
| fillSpace | false | Allow the accordion to fill the height of its container instead of sizing itself according to the content within it. |
| header | > li >:first-child,>:not(li):even | Specify the selector for header elements. Although it looks complex, this is a standard jQuery selector that simply targets the first-child within every odd <li> element. |
| icons | ‘header’: ‘ui-icon-triangle-1-e’, ‘headerSelected’: ‘ui-icon-triangle-1-s’ | Set the icons for the header elements and the selected state. |
| navigation | false | Enable navigation mode for accordion. |
| navigationFilter | location.href | Change the function used to obtain the ID of the content panel that should be open when the widget is initialized. |
Changing the trigger event
Most of the options are self-explanatory, and the values they accept are usually Booleans, strings, or element selectors. Let’s put some of them to use, so that we can explore their functionality. Change the final <script> element in accordion2.html so that it appears as follows:
<script>
(function($) {
var accOpts = {
event:”mouseover”
}
$(“#myAccordion”).accordion(accOpts);
})(jQuery);
</script>
Save these changes as accordion3.html. First, we create a new object literal called accOpts that contains the key event and the value mouseover, which is the event we wish to use to trigger the opening of an accordion panel. We pass this object to the accordion() method as an argument and it overrides the default option of the widget, which is click.
The mouseover event is commonly used as an alternative trigger event. Other events can also be used, for example, we can set keydown as the event, but in order for this to work, the accordion panel that we wish to open, must already be focused.
You should note that you can also set options using an inline object within the widget method, without creating a separate object. Using the following code would be equally as effective, and would often be the preferred way of coding:
<script>
(function($) {
$(“#myAccordion”).accordion({
event:”mouseover”
});
})(jQuery);
</script>
