We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Accordion

Features

As many elements as you need
Four different header sizes
Different settings to manipulate behaviour and look

Specify which items start open
Countless color settings
Re-order items with drag and drop

Header

Jodler naa unbandig des wiad a Mordsgaudi! Hogg ma uns zamm a Maß und no a Maß Biakriagal Fingahaggln, Schdeckalfisch hinter’m Berg san a no Leit! Pfiad de da, hog di hi weida, o’ha hoam pfiad de nackata midanand woaß vo de!

Header

Edlweiss Ewig und drei Dog Steckerleis Brotzeit! Mechad Mongdratzal Zidern Steckerleis mehra des is a gmahde Wiesn fei Ledahosn. Reiwadatschi a Hoiwe i hob di liab Bladl des is a gmahde Wiesn Schdeckalfisch sodala Foidweg!

Header

Ohrwaschl Bradwurschtsemmal Brodzeid nix Haferl hoam soi! Aba a Biawambn wolpern, anbandeln Baamwach owe. Schdeckalfisch schoo Prosd, kimmt wia da Buachbinda Wanninger nackata.

Download Example

Accordion Settings

Border Radius - sets the outer radius of the Accordion
Shadow - enter the X and Y offset (negative values are allowed), the blur radius and the spread.
Shadow Color - select the shadow color; allows opacity

Item Header Size

You can select four header sizes: small, default, medium and large.

Small Header

Default Header

Medium Header

Large Header

Accordion Item Settings

In Edit Mode, you can select whether to have an Accordion Item open or closed. Helpful if you require more space.

If you want a particular segment to be open upon page-load, set the "Is Active" option.

Set the "Toggle" option to close an open item if another item is clicked. Only a single item can be open at a time.

This option becomes available if "Toggle" was selected.
The Accordion Item becomes a "Close" item.
You can freely edit the item text.
The "Is Active" option is ignored.