Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Beginner

Expanders

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

Expanders is a nestable element that contains the element “Expander”. Each Expander element has a Label Wrapper that contains the Title and Icon to show. It also contains a Content Wrapper with all the hidden content to be shown when toggled.
You can set any of your content at both Label Wrapper and Content Wrapper elements.
Expanders is an element specially designed to craft FAQ sections and any other accordion styles.

Setting controls

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.

Style and animation controls

All nested children elements at Expanders element can be styled at their style tabs, but you can also use the controls available at this section to style all of them at once.
In addition, icon’s rotation degree and duration have to be set here, as well as the expander animation duration.

-Tamu

On this page