Accordion’s structure
Let’s take a moment to familiarize ourselves with what 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, or drawer as they are sometimes referred to, which opens when the heading is clicked. The following screenshot shows these elements as they may appear in an accordion:
It’s worth remembering that when using the accordion widget, only one content panel can be open at any one time. Let’s implement a basic accordion now. In a blank page in your text editor, create the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Accordion Widget Example 1</title>
</head>
<body>
<ul id="myAccordion">
<li>
<a href="#">Header 1</a>
<div>Wow, look at all this content that can be shown or hidden with a simple click!</div>
</li>
<li>
<a href="#">Header 2</a>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpatligula. Integer
vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum, turpis tellus fermentum metus, ut
bibendum velit enim eu lectus. Suspendisse potenti. </div>
</li>
<li>
<a href="#">Header 3</a>
<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>
</li>
</ul>
<script type="text/javascript" src="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.accordion.js"></script>
<script type="text/javascript">
//function to execute when doc ready
$(function() {
//turn specified element into an accordion
$("#myAccordion").accordion();
});
</script>
</body>
</html>
Save the file as accordion1.html in your jqueryui folder and try it out in a browser. We haven’t specified any styling at all at this stage, but as you can see from the following screenshot, it still functions exactly as intended:
Little code is required for a basic working version of the accordion widget. A simple unordered list element is the mark-up foundation which is transformed by the library into the accordion object.
The following three separate external script files are required for an accordion:
- The jQuery library itself (jquery-1.2.6.js)
- The UI base file (ui.core.js)
- The accordion source file (ui.accordion.js)
The first two files are mandatory requirements of all components of the UI library. They should be linked to in the order shown here. Each widget also has its own source file, and may depend on other components as well.
The order in which these files appear is important. The jQuery library must always appear first, followed by the UI base 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.
Finally, we use a custom <script> block to turn our <ul> element into the accordion. We can use the jQuery object shortcut $ to specify an anonymous function which will be executed as soon as the document is ready. This is analogous to using $(document).ready(function(){}) and helps to cut down on the amount of code we have to type.
Following this, we use the simple ID selector $(“#myAccordion”) to specify the element on the page we want to transform. We then use the accordion() constructor method to create the accordion
Other elements can be turned into accordions as well. All list element variants are supported including ordered lists and definition lists. You don’t even need to base the accordion on a list element at all. You can build a perfectly functional accordion using just nested <div> and <a> elements, although additional configuration will be required
In the above example, we used an empty fragment (#) as the value of the href attribute. You should note that any URLs supplied for accordion headers will not be followed when the header is clicked within the accordion when using the default implementation.
Styling the accordion
With no styling, the accordion will take up 100% of the width of its container. Like with other widgets, we have several options for styling the accordion. We can create our own custom stylesheet to control the appearance of the accordion and its content, we can use the default or flora themes that come with the library, or we can use Theme Roller to create an extensive skin for the whole library. Let’s see how using the flora theme for the accordion will cause it to render. In accordion1.html, add the following <link> tag to the <head> of the page:
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/themes/flora/flora.accordion.css">
Save the new file as accordion2.html, also in the jqueryui folder, and view it again in a browser. It should appear something like this:
The accordion theme file assumes that an unordered list is being used as the basis of the widget and specifically targets <li> elements with certain style rules. We can easily create our own custom theme to style the accordion for situations where we want to use a non-list-based accordion widget, or if we simply want different colors or font styles.
You can use the excellent Firebug plugin for Firefox, or another DOM viewer, to see the class names that are automatically added to certain elements when the accordion is generated. You can also read through an un-minified version of the source file if you really feel like it. These will be the class names that we’ll be targeting with our custom CSS.
The following screenshot shows Firebug in action:
Change accordion2.html so that it appears as follows (new code is shown in bold):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles/accordionTheme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Accordion Widget Example 3</title>
</head>
<body>
<div id="myAccordion">
<span class="corner topLeft"></span><span class="corner topRight"></span><span class="corner bottomLeft"></span><span class="corner bottomRight"></span>
<div><a href="#">Header 1</a><div>Wow, look at all this content that can be shown or hidden with a simple click!</div></div>
<div><a href="#">Header 2</a><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam
iaculis volutpatligula. Integer vitae felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est. Ut posuere, mauris at sodales rutrum,
turpis tellus fermentum metus, ut bibendum velit enim eu lectus. Suspendisse potenti.</div></div>
<div><a href="#">Header 3</a><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>
</div>
<script type="text/javascript" src="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/ui.accordion.js"></script>
<script type="text/javascript">
//function to execute when doc ready
$(function() {
//turn specified element into an accordion
$("#myAccordion").accordion();
});
</script>
</body>
</html>
Save this version as accordion3.html in the jqueryui folder. The class name ui-accordion is automatically added to the accordion’s container element. Therefore, we can use this as a starting point for most of our CSS selectors. The links that form our drawer headers are given the class ui-accordion-header so we can also target this class name. In a new file, create the following stylesheet:
#myAccordion {
width:200px;
border:2px solid #000000;
position:relative;
list-style-type:none;
padding-left:0;
}
.ui-accordion-header {
text-decoration:none;
font-weight:bold;
color:#000000;
display:block;
width:100%;
text-align:center;
}
.ui-accordion div div {
font-size:90%;
}
.ui-accordion a {
color:#ffffff;
background:url(../img/accordion/header-sprite.gif) repeat-x 0px 0px;
}
.ui-accordion a.selected {
background:url(../img/accordion/header-sprite.gif)
repeat-x 0px -22px;
}
.ui-accordion a:hover {
background:url(../img/accordion/header-sprite.gif)
repeat-x 0px -44px;
}
/* container rounded corners */
.corner {
position:absolute;
width:12px; height:13px;
background:url(../img/accordion/corner-sprite.gif) no-repeat;
}
.topLeft {
top:-2px; left:-2px;
background-position:0px 0px;
}
.topRight {
top:-2px; right:-2px;
background-position:0px -13px;
}
.bottomRight {
bottom:-2px; right:-2px;
background-position:0px -26px;
}
.bottomLeft {
bottom:-2px; left:-2px;
background-position:0px -39px;
}
Save this file as accordionTheme.css in your styles folder and preview accordion3.html in a browser. We will need a new folder for the images we use in this and subsequent examples. Create a new folder inside the img folder and name it accordion. With just two images, and a few simple style rules, we can drastically change the default appearance of the accordion with our own custom skin as shown in the following screenshot:
Configuring accordion
The accordion has a range of configurable properties which allow us to easily change the default behaviour of the widget. The following table lists the available properties, their default value, and gives a brief description of their usage:
