Accordion

Create expandable headings and explanations.

How to use

Write each item title and content and choose initially open items.
Decide whether multiple panels can stay open.
Set header/body colors and transition timing, then test in presentation mode.

Things to check

Closed panels are unreadable in static exports; keep important information visible.

Property reference

Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.

Find a property

24 / 24

accordionStyle

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'default' | 'bordered' | 'flush' | 'filled' | 'minimal' | 'modern' | 'gradient' | 'neon' | 'glass' | 'shadow' | 'elegant'

allowMultiple

Allows multiple accordion panels to remain open at once.

boolean

animated

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

animationDuration

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number

backgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

borderColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

borderRadius

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

contentBackgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

contentTextColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

customIcon

Selects a symbol or list marker. Use a catalogue icon or a marker accepted by the editor.

string

fontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

headerBackgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

headerFontSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

headerTextColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

hoverEffect

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

iconColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

iconType

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'plus' | 'arrow' | 'chevron' | 'custom'

items

Repeated module items. Add and order them in their editor and complete each item field.

AccordionItem[]

opacity

Visibility ratio: 0 is fully transparent and 1 is fully opaque.

number

padding

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

shadowEnabled

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

spacing

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

spacingColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

style

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'default' | 'bordered' | 'minimal' | 'card'