Summary

  • Overview
  • Adding Accordion To Pages
  • Adding New Tab to Accordion
  • Duplicating Accordion Tabs
  • Moving Accordion Tabs
  • Adding Elements to Accordion
  • Accordion Colors, Text, Icon and Spacing
    • Colors
    • Text
    • Icon
    • Spacing
  • Open Tab By Default

Accordion Overview

The Accordion Element allows you to create vertically stacked Tabs that expand to show rolled up content with a click on a heading or down arrow. Each Accordion Tab has content that is shown on click. As the content, you can add various elements like Text, Image, etc.

accordion.png

Adding Accordion To Pages

You can add the Accordion Element from the Add Panel.

add-accordion-to-page.png

Adding New Tab to Accordion

To add a new Tab to the Accordion Element, click the Plus icon on the Accordion Side Panel.

adding-new-tab-to-accordion.png

Duplicating Accordion Tabs

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

accordion-tab-duplicate.png

Moving Accordion Tabs

Move the Accordion Tabs by clicking on the Arrow icons in the Context Toolbar.

accordion-tab-move.png

Adding 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

Accordion Colors, Text, Icon, and Spacing

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

accordion-colors-fonts-spacing.png

Colors

Use the Colors Tab to pick the desired color for the Tab Background, Tab Border, Tab Text Color, Item Background, and Item Border.

accordion-item-border.png

Text Tab

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

accordion-text.png

Icon Tab

The Icon Tab allows you to enable the drop-down Icon for the Tab. You can select the desired Icon and its properties for the different states.

accordion-item-icon.png

Manage the States for the Expand / Collapse Icon of the Accordion Element, so it is more informative, and you will see the change on hovering.

accordion-icon-states.gif

Spacing

Specify the Spacing between tabs and also inside the Tab.

accordion-spacing.png

Open Tab By Default

You can control whether the first Tab will be opened By Default or not.

accordion-open-by-default.png

## Summary - Overview - Adding Accordion To Pages - Adding New Tab to Accordion - Duplicating Accordion Tabs - Moving Accordion Tabs - Adding Elements to Accordion - Accordion Colors, Text, Icon and Spacing - Colors - Text - Icon - Spacing - Open Tab By Default ## Accordion Overview The **Accordion** Element allows you to create vertically stacked Tabs that expand to show rolled up content with a click on a heading or down arrow. Each Accordion Tab has content that is shown on click. As the content, you can add various elements like Text, Image, etc. !accordion.png! ## Adding Accordion To Pages You can add the Accordion Element from the Add Panel. !add-accordion-to-page.png! ## Adding New Tab to Accordion To add a new Tab to the Accordion Element, click the Plus icon on the Accordion Side Panel. !adding-new-tab-to-accordion.png! ## Duplicating Accordion Tabs You can also duplicate the current Tab by clicking the Duplicate operation in the Context Toolbar or Context Menu options. !accordion-tab-duplicate.png! ## Moving Accordion Tabs Move the Accordion Tabs by clicking on the Arrow icons in the Context Toolbar. !accordion-tab-move.png! ## Adding 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! ## Accordion Colors, Text, Icon, and Spacing You can select the Accordion Element and change its Colors, Text, Icon, and Spacing Properties in the Property Panel. !accordion-colors-fonts-spacing.png! ### Colors Use the Colors Tab to pick the desired color for the Tab Background, Tab Border, Tab Text Color, Item Background, and Item Border. !accordion-item-border.png! ### Text Tab Select the Text tab, and change the Font Family and other Font properties for the Tab Heading. !accordion-text.png! ### Icon Tab The Icon Tab allows you to enable the drop-down Icon for the Tab. You can select the desired Icon and its properties for the different states. !accordion-item-icon.png! Manage the States for the Expand / Collapse Icon of the Accordion Element, so it is more informative, and you will see the change on hovering. !accordion-icon-states.gif! ### Spacing Specify the Spacing between tabs and also inside the Tab. !accordion-spacing.png! ## Open Tab By Default You can control whether the first Tab will be opened By Default or not. !accordion-open-by-default.png! ##