The Accordion Element allows you to create vertically stacked Tabs that expand to show rolled-up content when you click on a heading or down arrow. Each Accordion Tab is opened when you click it and displays content, such as Text, Images, etc.

Add Accordion

You can add the Accordion Element from the Add Panel.

Add Elements to Accordion

In the opened Accordion Tab, click the round blue Plus Icon to add Elements from the Add Elements list.

Context Toolbar

You can use the Context Toolbar for the Accordion Elements.

Add AccordionTab

Click the Plus icon on the Accordion Side Panel to add a new Tab to the Accordion Element.

Duplicate Accordion Tab

You can duplicate the current Tab by clicking the Duplicate operation in the Context Toolbar or Context Menu options.

Move Accordion Tab

Move the Accordion Tabs by clicking the Arrow icons in the Context Toolbar or choosing the Options.

Accordion Properties

You can select the Accordion Element and change its Colors, Tab Text, Icon, and Spacing Properties in the Property Panel.

Colors Properties

Use the Colors Properties to stylize the Background and Body of the Accordion Tabs and Items.

Tab Text Properties

Select the Text tab, and change the Font Family and other Font properties for the Tab Heading.

Icon Properties

The Icon Tab enables the drop-down Icon for the Tab. You can select the desired Icon and its properties for the different states.

Like the Button, you can manage the Icon States for the Accordion Element.

Spacing Properties

Specify the Spacing between tabs and inside the Tab.

Open Tab By Default

You can control whether or not the Tab Tab will be opened by default.

Accordion Text Icon

You can insert Icons into the Accordion Title and Text.

The Accordion Element allows you to create vertically stacked Tabs that expand to show rolled-up content when you click on a heading or down arrow. Each Accordion Tab is opened when you click it and displays content, such as Text, Images, etc. !accordion.png! ## Add Accordion You can add the Accordion Element from the Add Panel. !add-accordion-to-page.png! ## Add Elements to Accordion In the opened Accordion Tab, click the round blue Plus Icon to add Elements from the Add Elements list. !adding-elements-to-accordion.png! ## Context Toolbar You can use the Context Toolbar for the Accordion Elements. !accordion-toolbar.png! ## Add AccordionTab Click the Plus icon on the Accordion Side Panel to add a new Tab to the Accordion Element. !adding-new-tab-to-accordion.png! ## Duplicate Accordion Tab You can duplicate the current Tab by clicking the Duplicate operation in the Context Toolbar or Context Menu options. !accordion-tab-duplicate.png! ## Move Accordion Tab Move the Accordion Tabs by clicking the Arrow icons in the Context Toolbar or choosing the Options. !accordion-tab-move.png! ## Accordion Properties You can select the Accordion Element and change its Colors, Tab Text, Icon, and Spacing Properties in the Property Panel. !accordion-properties.png! ### Colors Properties Use the Colors Properties to stylize the Background and Body of the Accordion Tabs and Items. !accordion-item-border.png! ### Tab Text Properties Select the Text tab, and change the Font Family and other Font properties for the Tab Heading. !accordion-text.png! ### Icon Properties The Icon Tab enables the drop-down Icon for the Tab. You can select the desired Icon and its properties for the different states. Like the Button, you can manage the Icon States for the Accordion Element. !accordion-item-icon.png! ### Spacing Properties Specify the Spacing between tabs and inside the Tab. !accordion-spacing.png! ## Open Tab By Default You can control whether or not the Tab Tab will be opened by default. !accordion-open-by-default.png! ## Accordion Text Icon You can insert Icons into the Accordion Title and Text. !icons-accordion-texts.png! ##