How to add an attribute:

close icon
Hey! Give us some feedback here.
Components

Accordion

Create accessible accordions inside Webflow without Webflow Interactions.

Accordion

Webflow Libraries component

Install Finsweet in Webflow Libraries
Copy this component inside Designer
Use this docs page to further customize
Scroll to docs
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
Accordion
I want this
div block icon

Div Block

wrap one accordion item in the list of accordion items.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-accordion-element
copy icon
Value
accordion
copy icon
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.
navigator arrow
Trigger
I want this
div block icon

Div Block

to toggle the open and close state of the accordion content.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-accordion-element
copy icon
Value
trigger
copy icon
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.
navigator arrow
Content
I want this
div block icon

Div Block

to be the element that holds the expanded accordion content.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-accordion-element
copy icon
Value
content
copy icon
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.
navigator arrow
Arrow
I want this
div block icon

Div Block

to be the arrow inside the trigger.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-accordion-element
copy icon
Value
arrow
copy icon
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.
navigator arrow

Option

Active
The option to have a custom class added to the accordion element.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-accordion-active
copy icon
Value
is-active-accordion
copy icon
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.
Where?
Add to any element with
fs-accordion-element = "accordion | trigger | content | group"

Group options

Apply the group attribute to enable group options.

navigator arrow
Group
I want this
div block icon

Div Block

to wrap all accordion elements part of a "group".
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-accordion-element
copy icon
Value
group
copy icon
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".
navigator arrow

Option

Single
The option to have only one accordion open at one time in a group.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-accordion-single
copy icon
Value
true
copy icon
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.
Where?
Add to the element with fs-accordion-element = "group"
navigator arrow

Option

Initial
The option to have or more accordion items in a group expanded by default.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-accordion-initial
copy icon
Value
NUMERIC_INDEX
copy icon
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.
Where?
Add to the element with fs-accordion-element = "group"

Working examples

See this solution working live in this Webflow project.

Example 1
Accordion 1 - IX2
Copy and paste this example inside Webflow Libraries
Go to Accessible Components Library

This component uses custom JavaScript to open and close. Custom attributes and additional custom JavaScript is added to this component to make it accessible.

Inside this component, there is an embed block that contains all of the custom code needed for this accordion to function.

We have full documentation for this accordion component here. You can use it to edit this component —or to build your own accessible accordion from scratch.

Example 2
Accordion 2 - JS
Copy and paste this example inside Webflow Libraries
Go to Accessible Components Library

This component uses custom JavaScript to open and close. Custom attributes and additional custom JavaScript is added to this component to make it accessible.

Inside this component, there is an embed block that contains all of the custom code needed for this accordion to function.

We have full documentation for this accordion component here. You can use it to edit this component —or to build your own accessible accordion from scratch.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.