Accordion

Using the Accordion element lets you save space while still presenting an abundance of content. Add the accordions with a great repeater where you can add the title and the content.

With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest.

When a page is loaded, the first item of the Accordion element is expanded, while all other items remain collapsed. With the Toggle element, however, all items are collapsed when a page is first loaded.

Only one item of an Accordion can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion. With the Toggle element, however, as many items as desired can be expanded at the same time.

Content:

• Accordion Items Title & Content: Enter the title and description for each item.

• Icon: Select the icon to represent the action of expanding an item.

• Active Icon: Select the icon to represent the action of collapsing the active item.

• Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIV.

• Add Item: Use the 'Add Item' button to add more accordion items to the list.

Style:

• Accordion

  • Border Width: Set the thickness of the border around the accordion and between each item.

  • Border Color: Choose the color of the border around the accordion and between each item.

• Title

  • Background: Choose the color of the title’s background.

  • Color: Choose the color of the non-active titles’ text.

  • Active Color: Choose the color of the active title’s text.

  • Typography: Set the typography options for the titles.

  • Padding: Set the padding for the titles.

• Icon

  • Alignment: Align the icon to the left or right of the title.

  • Color: Choose the color of the icons.

  • Active Color: Choose the color of the active icon.

  • Spacing: Control the spacing between the icon and the title.

• Content

  • Background: Choose the background color of the content.

  • Color: Choose the text color of the content.

  • Typography: Set the typography options for the content.

  • Padding: Set the padding for the content.