T J T J - 5 months ago 10x
jQuery Question

What is the "down" property in jQuery UI Accordion

I'm trying to optimize the animation for a large scrollable jQuery UI Accordion. The documentation mentions that the animate option accepts an object as argument

Object: Animation settings with easing and duration properties.

  • Can also contain a down property with any of the above options.

  • "Down" animations occur when the panel being activated has a lower index than the currently active panel.

What is the down property or down animation ?

Also, while searching, I came across this answer which uses options such as
, which i couldn't find in the documentation. Are these deprecated or do they exist without documentation?


Let's take a look at the Accordion example. The down property is used to specify a different animation than the up animation, which is specified by the animate property. Take the example and exchange line 39 with the following snippet:

$( "#accordion" ).accordion({
    animate: {
      easing: 'linear',
      duration: 100,
      down: {
        easing: 'swing',
        duration: 900

Easings are explained at api.jqueryui.com and if you open the modified example in the browser, the most obvious difference between the up and down animation is the duration.

autoHeight and clearStyle got deprecated. In the new versions heightStyle should suffice for your usecases. heightStyle is illustrated as an Accordion example.