Accordion code is written in ES6 version of JavaScript.
There is an option “singleMode”, if you want to have only one opened at the time, or more contents can be visible simultaneously.
Accordion Example
Sliding Effect
If you want to have sliding effect, keep in mind:
- do not set height via CSS
- do not set content “display:none;” via CSS
- hide it dynamically with JavaScript
- 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?