Display text in an expandable list using the Accordion widget. As opposed to the Toggle widget, the first item in the Accordion widget is expanded.

The Content Tab

Accordion

Click on Add Item to add a new item to the list. Click on each item to edit it. Drag and drop the item to rearrange their order.

Title & Description: Insert the title and description of the item in their relative fields.

Icon: Option to set an icon next to the item to represent the collapsed state of the item.

Active Icon: Option to set an icon next to the item to represent the expanded state of the item.

HTML Tag: Set an HTML tag to the title text.

The Style Tab

Accordion 

Border Width: Set the thickness of the border.

Border Color: Customize the color of the border. 

Title

Background: Customize the color of the accordion background.

Color: Customize the title color. 

Active Color: Adjust the color of the active item title. 

Typography: Customize the typographical settings of the title. 

Padding: Set the space of the titles relative to the interior of their borders. 

Icon 

Alignment: Align the icon at the start or end of the box. 

Color: Set a custom color for the icon. 

Active Color: Adjust the color of the active item icon. 

Spacing: Adjust the spacing between the icon and the title. 

Content 

Background Color: Customize the background color of the item content. 

Color: Customize the color of the content. 

Typography: Customize the typographical settings of the content. 

Padding: Set the padding of the content. 

The Advanced Tab

In the advanced tab adjust the padding, apply Z-index to your elements, set conditions, motion effects, responsiveness, and more.

Next Up: Toggle