Accordion

This component is used to display detailed and very diverse information that can go from subjects or topics such as descriptions for some of the features of your store, frequently asked questions, product details, etc.

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Adjust accordion width

When enabled, the following options will become visible:

Width

Allows to define the width of the accordion, based on the following presets:

• Small: Sets the accordion width to 50% of the available space.
• Medium: Sets the accordion width to approximately 66% of the available space.
• Large: Sets the accordion width to approximately 83% of the available space.

When this option is disabled, the accordion will stretch to occupy the full width of the section.

Horizontal position

Allows to define the position of the accordion on the horizontal axis.

Enable collapsible items

By enabling this option, when a user clicks on one accordion item the rest will close. On the contrary, when disabled, all items will remain open when clicking on them.

First item opened

Allows to define that the first item of the accordion is opened by default on page load. How or when this first item closes or not will depend on the behavior of the previous option.

Show icons

Allows to display icons at the left side of each item title. By enabling this, an icon option will be displayed on each Accordion item setting.

Heading options

By enabling this, a Heading section will be displayed before the component’s content. You can find the list of options in this page.

Appearance

This group contains the following options to customize the component:

• Borders style: allows to define how the borders of the accordion will be displayed.
• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Content colors: allows to choose the Color Pack for the component.

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available in this page.

---

---

Subcomponent settings

The subcomponent for an Accordion is called Accordion item and you can add as many as you want to provide the necessary information for your clients. The options for this subcomponent are the following:

Icon

Allows to define an icon for the item. Will be displayed only if Show icons is enabled at the main component settings.

Title

Title or name for the accordion item.

Note: This field is mandatory.

Content

Here you can add a text or description for the accordion item.

Image

Allows to add an image along with the content of the accordion item. The following options will become visible to customize it:

• Image size: Allows to define the width that the image will have from 10% to 100%. These percentages will depend on the width of the item, which is defined by the width of the entire accordion.
• Image position: Allows to define if the image will be placed before or after the content of the item.