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

Question

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.

score 4 · Accepted Answer · answered May 21 '10 at 12:33

4

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.

answered May 21 '10 at 12:33

Nick Craver

1

Note: as of jQuery UI 1.9 change `animated` to `animate`. – Apr 07 '15 at 22:21

score 0 · Answer 2 · edited Jan 18 '14 at 17:44

0

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 method.

edited Jan 18 '14 at 17:44

Richard Ev

answered May 21 '10 at 07:08

Sarfraz

4

Yes, but how do I actually apply those UI animation effects to the accordion code? Where does it go and how does it need to be written? – Travis Smith May 21 '10 at 08:10

2 Answers2