How do I change the animation style of a jQuery Accordion?

Question

Hi there.

Is there a way to change the default animation that jQuery accordion uses? It appears to be "slide" but I'd like to use a Bounce or Drop effect.

Here's my current code:

$("#accordion").accordion({ autoHeight: false, collapsible: true, event: 'click', active: 4 });

I'd like to change this from a slide to a drop or a bounce.

TTFN Travis

Answer 1

You can use the JQuery UI effects if you want more animations styles. And yes there are bounce and drop effects there too.

Note: You can also construct your own animations styles using animate memthod.

Answer 2

You can use the animated option for this, for example to get your bounce:

$("#accordion").accordion({ 
  animated: 'bounceslide',
  autoHeight: false, 
  collapsible: true, 
  event: 'click', 
  active: 4
});

The default is 'slide', you can view a demo here.