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:
<!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/accordionTheme2.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Accordion Widget Example 12</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 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>
</body>
</html>
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 at http://plugins.jquery.com/. 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:
<!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 13</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 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>
</body>
</html>
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.
