Jquery Accordion Easing

Question

I am trying to get a nicer feel to my drop down accordion...but it isnt happening for me...any ideas?

Here is my code in the accordion itself...

    <div id="accordion">
        <h3 id="branding"><a href="#">Branding</a></h3>
        <div>Lorem Ipsum is simply dummy text</div>            
        <h3 id="website"><a href="#">Website</a></h3>
        <div>Lorem Ipsum is simply dummy text</div>
    </div>

And in the head...

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"&gt;&lt;/script&gt;
<script type="text/javascript">
  $(document).ready(function(){
     $('#accordion').accordion({ navigation: true, easing: 'easeInBack' });
  });
</script>

Answer 1

I've always used the 'animated' property to do this, rather than the easing plugin. e.g.:

 $('#some-list').accordion({collapsible: true, 
                            animated: 'bounceslide', 
                            autoHeight: false});

Perhaps give that a try.

Although I've realised that this uses the easing plugin anyway!

So I did a bit of research and found a comment in this document which explains how to define your own easing-based animations. So, to do what you want, you could use the following:

 $.ui.accordion.animations.eib = function(settings) {
   this.slide(settings, {
     easing: "easeInBack",
     duration: 600
   });
 }   

 $(function() {
   $("#accordion").accordion({
     animated: "eib"
 });