There is an option “singleMode”, if you want to have only one opened at the time, or more contents can be visible simultaneously.
If you want to have sliding effect, keep in mind:
- do not set height via CSS
- do not set content “display:none;” via CSS
- enable smooth CSS transition on content box
This is important, because original height is kept in “data-height” attribute, only then content is hidden after load. Now, when you know the height, you can set it to the activated item.
Finally, don’t forget to disable content flow out of the box with CSS “overflow:hidden;” property.
Animation itself is held by means of simple CSS transition property. Check CSS tab in the JSFiddle.
How do you implement accordion feature?