Accordion widget

the Accordion widget se utiliza para mostrar el texto de forma comprimida y condensada, lo que le permite ahorrar espacio sin dejar de presentar una gran cantidad de contents.

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

A similar widget is the Toggle widget, but there are two main differences between Accordion widget and the Lever widget.

1. When a page loads, the first element of the Accordion widget expands, while all other elements remain collapsed. However, with the Toggle widget, all items collapse when a page is first loaded.
2. Only one element of an accordion can be expanded at a time. As you expand another accordion item, the previously opened item automatically collapses, looking like an accordion. However, with the Toggle widget, you can expand as many items as you like at the same time.

Content

Accordion

1. Accordion articles title and content: Enter the title and description of each item
2. Icon: Select the icon to represent the action of expanding an item. Choose None, Upload SVG, or select an icon from the Icon Library. If the Icon Library is chosen, a Recommended tab is displayed in the Library that shows the recommended icons to represent the expanding concept.
3. Active icon: Select the icon to represent the action of collapsing the active item. Choose None, Upload SVG, or select an icon from the Icon Library. If the Icon Library is chosen, a Recommended tab is displayed in the Library that shows the recommended icons to represent the concept of collapse.
4. Label HTML de título: Set the HTML tag used for the title to H1-H6 or DIV
5. Add item: Use the 'Add Item' button to add more accordion items to the list.

Style

Accordion

1. Border width: Sets the thickness of the border around the accordion and between each element
2. Border color: Choose the border color around the accordion and between each element

Title

1. Background: Choose the color of the title background
2. Colour: Choose the text color of the non-active titles
3. Active color: Choose the text color of the active title
4. Typography: Sets the font options for titles
5. Filling: Sets padding for titles

Icon

1. Alignment: Aligns the icon to the left or right of the title
2. Colour: Choose the color of the icons
3. Active color: Choose the color of the active icon
4. Spacing: Controls the space between the icon and the title

Content

1. Background: Choose the background color of the content
2. Colour: Choose the text color of the content
3. Typography: Sets the font options for the content
4. Filling: Sets padding for content

Advanced

Set the advanced options that are applicable to this widget