jQuery UI Accordion Widget Pt.2

The accordion widget is a robust and highly configurable widget that allows you to save space on your web pages by only displaying a certain section of related content at any one time.

This is like a tabbed interface but positioned vertically instead of horizontally. It’s easy for your visitors to use and it’s easy for us to implement. It has a range of configurable properties that can be used to customize its appearance and behaviour. It also has a series of methods that allow you to control it programmatically.

In the previous part of this article, we looked at the structure of an accordion widget and its configurable properties. In this second part , we will cover the following topics:

– Built-in types of animation –
– Custom accordion events –

Accordion Animation

You may have noticed the default slide animation built into the accordion. Apart from this, there are two other built-in animations that we can easily make use of. We can also switch off animations entirely by supplying false as the value of the animated property, although this doesn’t look too good!

The other values we can supply are bounceslide and easeslide. However, these aren’t actually unique animations as such. These are different easing styles which don’t change the animation itself but instead, alter the way it runs. You should note at this stage that additional jQuery plugins are required for these easing methods.

For example, the bounceslide easing method causes the opening drawer to appear to bounce up and down slightly as it reaches the end of the animation. On the other hand, easeslide makes the animation begin slowly and then builds up to its normal speed. Let’s take a moment to look at these different easing methods now. Change accordion11.html so that it appears as follows.

<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 volutpat ligula. 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/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/jquery.easing.compatibility.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() {
//set custom easing
var accOpts = {
animated: "bounceslide"
}
//turn specified element into an accordion
$("#myAccordion").accordion(accOpts);
});
</script>

Save this file as accordion12.html. We’ve used a couple of new script files in the source code. The jquery.easing.1.3.js file is the latest version of the easing plugin, and the jquery.easing.compatibility.js plugin which enables the latest version of the easing file to work without any further modifications. The easing type names were renamed in version 1.2 of the easing plugin. Both of these files can be found on the jQuery site.

The built-in easing effects, based on a series of equations created by Robert Penner in 2006, are very easy to use and create a great effect which can help build individuality into accordion implementations

Plugins:
There are many jQuery plugins available. These are often developed by the open-source community instead of the library’s authors and can be used with jQuery and jQuery UI. A good place to find plugins is on the jQuery site itself. Some of these plugins, such as the easing plugin, work with the library components, while other plugins, such as the compatibility plugin, assist other plugins.

Accordion Events

The accordion defines the custom change event which is fired after a drawer on the accordion opens or closes. To react to this event, we can use the change configuration property to specify a function to be executed every time the event occurs. In a new file in your text editor, add the following code.

<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 id="panel1">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 id="panel2">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. 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 id="panel3">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() {
//define config object
var accOpts = {
//add change event callback
change: function(e, ui) {
alert($(ui.newContent).attr("id") + " was opened, " + $(ui.oldContent).attr("id") + " was closed");
}
};
$("#myAccordion").accordion(accOpts);
});
</script>

Save this as accordion13.html. In this example, we use the change configuration property to specify an anonymous callback function which is executed every time the event is triggered. This function will automatically receive two objects as arguments. The first object is the event object which contains information about the event. The second object is an object containing useful information about the accordion widget, such as the content drawer that just opened or closed.

In the mark-up for the accordion, we have given each of the content drawer “div” elements an id attribute which can be used in the alert generated by the change callback. We can use the ui.newContent and ui.oldContent properties to obtain the relevant content drawer and display its id in the alert.

The accordion widget also defines the accordion change event which is fired after a drawer on the accordion opens or closes. To react to this event, we can use the standard jQuery bind() method to specify a callback function, just like with the tabs widget.

Fun With Accordion

Let’s put a sample together that will make the most of the accordion widget and uses some of the properties and methods that we’ve looked at so far in both the parts of this article. A popular implementation of accordion is as a navigation menu. Let’s build one of these based on the accordion widget. The following screenshot shows the finished page.

In a new page in your text editor, create the following HTML file.

  <div id="container">
   <div id="navCol">
    <ul id="navAccordion">
     <li>
      <a class="heading" href="#me" title="About Me">About Me</a>
      <div>
        <a href="bio.html#me" title="Bio">My Bio</a>
        <a href="contact.html#me" title="Contact Me">Contact Me</a>
        <a href="resume.html#me" title="Resume">My Resume</a>
      </div>
    </li>
    <li>
     <a class="heading" href="#js" title="JavaScript">JavaScript</a>
    <div>
     <a href="tutorials.html#js" title="JavaScript Tutorials">JavaScript Tutorials</a>
     <a href="ajax.html#js" title="AJAX">AJAX</a>
     <a href="apps.html#js" title="JavaScript Apps">JavaScript Apps</a>
    </div>
   </li>
   <li>
    <a class="heading" href="#css" title="CSS">CSS</a>
    <div>
     <a href="layouts.html#css" title="Layouts">Layouts</a>
     <a href="themes.html#css" title="Themes">Themes</a>
     <a href="hacks.html#css" title="Hacks">Hacks</a>
    </div>
   </li>
  </ul>
 </div>
<div id="contentCol">
  <h1>A jQuery UI Accordion Navigation Example!</h1>
  <p>This is the starting page for this example, when you click on either of the accordion headings at the left,
  an accordion drawer containing a set of links will open. Clicking on a link will take you to a new page, which will
  look exactly like this one but will have different text on it.</p>
  </div>
  <div id="clear"></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
   $("#navAccordion").accordion({
      header: ".heading",
      event: "mouseover",
      autoHeight: false,
      alwaysOpen: false,
      active:false,
      navigation: true
   });
 });
   </script>

Save this as navAccordion.html. To see the full effects of the navigation property, the other pages that the main page links to should be available.

We use a selection of configurable properties in this example. The header property allows us to target only the links that have the class name heading. This prevents the links in the content sections from picking up any header attributes. We make use of the event property again to specify mouse over as the trigger event.

Switching off the autoHeight property prevents unnecessary whitespace in the menu from showing if there is one content section with much more content in it than other sections. The alwaysOpen property allows all headings to be closed. Disabling the active property also allows the page to load with all headings closed which is helpful if someone is visiting the application for the first time.

In order to make the most of the navigation property in this example, we make sure that all the links that lead to new pages also include a fragment identifier matching the href of their heading element. Therefore, when a new page opens the state of the menu is maintained.

We’ll also need some CSS for this example, just to make the page and the accordion look as we want them to. In a new file in your text editor, add the following stylesheet.

/* page */
#clear { clear:both; }
#container { border:1px solid #4e82b4; width:601px; }
#navCol {
  width:230px; height:287px; float:left; background-color:#a1d2f6;
}
#contentCol {
  width:310px; height:227px; float:left; background-color:#ffffff; padding:30px; border-left:1px solid #4e82b4;
}
h1 { margin:0px; font:bold 14px Verdana; }
#contentCol p { margin:20px 0 0 0; font:normal 11px Verdana; }
/* accordion */
#navAccordion {
  list-style-type:none; padding-left:0; text-align:right; margin:20px 0 0 0; width:231px; position:relative; left:0;
}
#navAccordion a {
  display:block; text-decoration:none; font:bold 11px Verdana; color:#000000; padding:0 40px 0 0; padding-bottom:5px;
}
#navAccordion a:hover { text-decoration:underline; }
#navAccordion a.heading {
  font:bold 24px Verdana; color:#ffffff; border-bottom:1px dashed #4e82b4; padding:0 30px 10px 0;
}
#navAccordion a.heading:hover { text-decoration:none; }
 .selected, #navAccordion .selected a.heading {
  background-color:#ffffff; color:#000000; border-top:0; border-bottom:1px solid #4e82b4; border-right:1px solid #ffffff;
  border-left:1px solid #ffffff;
}
#navAccordion .selected a.heading { border:0; }
#navAccordion li { margin:0; }
#navAccordion li span, #navAccordion li a { background-image:none; }
#navAccordion li span { display:none; }

Save this as navAccordionTheme.css in the styles folder. The page and CSS code is kept as minimal as possible, although a certain minimum amount of coding is going to be required in any practical example.

If you run navAccordion.html in your browser now, and then click on any of the links within each content section, you’ll navigate to a new page. Thanks to the navigation:true name:value pair, the relevant section of the accordion will be open when the new page loads as seen below.

Summary

In this article we looked at accordian’s default animation and saw how we can add simple transition effects to the opening of content drawers. Accordion widget is a flexible and robust widget that provides essential functionality and interaction in an aesthetically pleasing way.

Liked This Article? Why Not Buy The Book

Build highly interactive web applications with ready-to-use widgets of the jQuery user interface library.

Buy The Book

Learn More…

Enjoy