Accordion

This is the outer wrapper of one accordion item. This element must contain one trigger and one content element inside.

If there are 5 accordion items, this attribute should be placed on each item. If using a CMS Collection List, this attribute can be placed once on the Collection Item element.

This element triggers the open and close of the accordion item content.

It is required to be inside an accordion element.

There is no requirement for parent, child, or sibling relationships between the trigger and the content.

This element wraps the content of the accordion and will expand and close when the trigger is clicked.

It is required to be inside an accordion element.

There is no requirement for parent, child, or sibling relationships between the trigger and the content.

Optional.

This element is the arrow inside the accordion trigger.

This arrow element will receive the active class when the content is expanded.

Use Webflow native transition and transform CSS properties to create custom animations for the arrow.

For example, apply a rotate 180 degrees transform to the arrow element active state. This will create an arrow rotation effect.

Optionally customize the active class applied to elements in the accordion.
‍
The default class name is .is-active-accordion. This class is applied to the accordion, trigger, content, and arrow.

To keep the default class name, there is no need to add this attribute. To change the class name, set the value as the custom class name you want.

When an accordion has expanded content, any element with the fs-accordion-active class will receive this class as an active state.

Apply this attribute to the group element for the active class to cascade down to all elements in the accordion. All elements in the accordion will inherit the group settings.

This element and attribute is only required to use group options.

This attribute wraps all accordion items that should be classified as part of the same "group".

This option forces one single accordion open at any time. When a second accordion is opened in a group, the previous opened accordion closes.

By default, this option is set to false and all accordions can be opened without forced close.

This option sets which accordion items in the group are open on load.

By default, this option is set to "1" to have all items closed on load set the value to "none".

NUMERIC_INDEX - A comma-separated list of indexes that define which accordions should be open.

For example,
‍"1" - The first accordion in the group is open.
‍"5" - The 5th accordion in the group is open.
‍"1, 4, 9" - The 1st, 4th, and 9th accordions in the group are open.