Jose Tamu
January 10, 2025 /
Beginner

Accordion

Have a question about topic one?

Phasellus vestibulum justo laoreet odio vehicula porttitor. Quisque nec volutpat mauris. Donec eu magna nec diam consequat auctor.
Cras mollis congue libero, non eleifend sapien faucibus eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

Have a question about topic two?

Phasellus vestibulum justo laoreet odio vehicula porttitor. Quisque nec volutpat mauris. Donec eu magna nec diam consequat auctor.
Cras mollis congue libero, non eleifend sapien faucibus eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

Have a question about topic three?

Phasellus vestibulum justo laoreet odio vehicula porttitor. Quisque nec volutpat mauris. Donec eu magna nec diam consequat auctor.
Cras mollis congue libero, non eleifend sapien faucibus eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

How it works

Accordion is a nestable element that contains the element “Accordion”. Each Accordion element has a "Label" element that contains the Heading and Icon to show. It also contains a "Content" element with all the hidden content to be shown when toggled.
You can set any of your content at both Label and Content elements.
Accordion is an element especially designed to create FAQ sections and any other accordion types.

Content tab

Settings group

Mode: determines the event that will toggle expanders: hover or click.
Open one at a time: if enabled, only one expander can be opened at a time, closing any other expander as soon as a new expander is opened.
Open all by default: if enabled, all expanders will open when page loads.
Open this by default: admits an expander number that will open when page loads. e.g: 1 will open first expander at page load. Requires “Open all by default” to be false.

Animations groups

The Icon and Expand animations of the Accordions can be customized at both groups, including icon rotation's degree and their durations.

Style tab

There are 3 groups available to style Accordion: Margin, Size and Borders. If you need to apply additional styles, you can do so at the Settings Tab.
All nested elements like Labels and Contents can be styled at their style tabs.