The accordion widget comes with the built-in slide animation that is enabled by default, and has been present in all of our examples so far. Disabling this animation is as easy as supplying false as the value of the animate option. Remove the <style> tag from the <head> element of the page in accordion6.html, and remove the additional container <div>, then change the configuration object so that it appears as follows:
<script>
$(document).ready(function($) {
$("#myAccordion").accordion({
animate: false
});
});
</script>Save this as accordion7.html. This will cause each content panel to open immediately instead of sliding-open nicely whenever a header is clicked.
An alternate animation has also been built into the widget—the EaseOutBounce animation. However, to use this alternate animation, we need to add a link to the jquery.ui.effect.js file.
Directly after the link to jquery.ui.accordion.js at the...