Summary

  • Overview
  • Add Accordion
  • Add Elements to Accordion
  • Context Toolbar
  • Add Accordion Tab
  • Duplicate Accordion Tab
  • Move Accordion Tab
  • Accordion Properties
    • Colors Properties
    • Tab Text Properties
    • Icon Properties
    • Spacing Properties
  • Open Tab By Default
  • Accordion Text Icon

Overview

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

## Summary - Overview - Add Accordion - Add Elements to Accordion - Context Toolbar - Add Accordion Tab - Duplicate Accordion Tab - Move Accordion Tab - Accordion Properties - Colors Properties - Tab Text Properties - Icon Properties - Spacing Properties - Open Tab By Default - Accordion Text Icon ## Overview 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! ##