Documentation Index Fetch the complete documentation index at: https://mintlify.com/finsweet/attributes/llms.txt
Use this file to discover all available pages before exploring further.
Overview The fs-accordion attribute enables you to create fully accessible, keyboard-navigable accordions in Webflow without relying on Webflow Interactions. It supports nested accordions, multiple accordion groups, and works seamlessly with CMS lists.
Basic Setup Single Accordion Create a basic accordion with a trigger and content:
< div fs-accordion-element = "accordion" > <!-- Trigger button --> < button fs-accordion-element = "trigger" > Accordion Title < div fs-accordion-element = "arrow" > ▼ </ div > </ button > <!-- Content --> < div fs-accordion-element = "content" > < p > This is the accordion content that will be shown/hidden. </ p > </ div > </ div >
Accordion Group Wrap multiple accordions in a group to control their behavior:
< div fs-accordion-element = "group" > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > Item 1 </ button > < div fs-accordion-element = "content" > Content 1 </ div > </ div > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > Item 2 </ button > < div fs-accordion-element = "content" > Content 2 </ div > </ div > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > Item 3 </ button > < div fs-accordion-element = "content" > Content 3 </ div > </ div > </ div >
Elements fs-accordion-element=“group” Defines a group of accordion elements. Use this to control whether multiple accordions can be open simultaneously.
< div fs-accordion-element = "group" > <!-- Multiple accordions --> </ div >
fs-accordion-element=“accordion” Defines an individual accordion element. This is the container for a single accordion item.
< div fs-accordion-element = "accordion" > <!-- Trigger and content --> </ div >
fs-accordion-element=“trigger” Defines the clickable element that opens/closes the accordion. This is typically a button or clickable div.
< button fs-accordion-element = "trigger" > Click to expand </ button >
For accessibility, the trigger should be a <button> element or have role="button" and appropriate ARIA attributes.
fs-accordion-element=“content” Defines the content container that will be shown/hidden when the trigger is clicked.
< div fs-accordion-element = "content" > < p > Your accordion content goes here. </ p > </ div >
fs-accordion-element=“arrow” Defines an arrow or icon element that rotates when the accordion opens/closes.
< button fs-accordion-element = "trigger" > Accordion Title < div fs-accordion-element = "arrow" > ▼ </ div > </ button >
Settings Single Mode Allow only one accordion to be open at a time within a group:
< div fs-accordion-element = "group" fs-accordion-single = "true" > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > Item 1 </ button > < div fs-accordion-element = "content" > Content 1 </ div > </ div > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > Item 2 </ button > < div fs-accordion-element = "content" > Content 2 </ div > </ div > </ div >
When fs-accordion-single="true" is set, opening one accordion will automatically close others in the same group.
Initial State Control which accordions are open by default:
<!-- Open the first accordion --> < div fs-accordion-element = "group" fs-accordion-initial = "1" > <!-- Accordions --> </ div > <!-- Open multiple accordions (comma-separated) --> < div fs-accordion-element = "group" fs-accordion-initial = "1,3,5" > <!-- Accordions --> </ div > <!-- All accordions closed by default --> < div fs-accordion-element = "group" fs-accordion-initial = "none" > <!-- Accordions --> </ div >
Accordion numbering starts at 1, not 0. The first accordion is 1, the second is 2, etc.
Active Class Customize the CSS class applied to open accordions:
< div fs-accordion-element = "group" fs-accordion-activeclass = "open" > < div fs-accordion-element = "accordion" > <!-- When open, this div will have class "open" --> </ div > </ div >
Default active class: is-accordion-active
Styling CSS Classes The accordion automatically applies CSS classes to help with styling:
/* Active accordion */ .is-accordion-active { /* Your styles */ } /* Arrow rotation */ [ fs-accordion-element = "arrow" ] { transition : transform 0.3 s ease ; } .is-accordion-active [ fs-accordion-element = "arrow" ] { transform : rotate ( 180 deg ); } /* Content animation */ [ fs-accordion-element = "content" ] { display : grid ; grid-template-rows : 0 fr ; transition : grid-template-rows 0.3 s ease ; } .is-accordion-active [ fs-accordion-element = "content" ] { grid-template-rows : 1 fr ; } [ fs-accordion-element = "content" ] > * { overflow : hidden ; }
Content Animation For smooth height animations, use the grid technique:
[ fs-accordion-element = "content" ] { display : grid ; grid-template-rows : 0 fr ; transition : grid-template-rows 300 ms ease-out ; } [ fs-accordion-element = "accordion" ] .is-accordion-active [ fs-accordion-element = "content" ] { grid-template-rows : 1 fr ; } [ fs-accordion-element = "content" ] > div { overflow : hidden ; }
CMS Integration With CMS Lists Accordions work seamlessly with Webflow CMS Collections:
< div fs-accordion-element = "group" fs-accordion-single = "true" > <!-- Webflow CMS Collection List --> < div class = "w-dyn-list" > < div class = "w-dyn-items" > < div class = "w-dyn-item" fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > < div class = "question-text" > Question from CMS </ div > < div fs-accordion-element = "arrow" > ▼ </ div > </ button > < div fs-accordion-element = "content" > < div class = "answer-text" > Answer from CMS </ div > </ div > </ div > </ div > </ div > </ div >
With fs-list Accordions automatically integrate with the fs-list attribute:
< div fs-list-element = "list" > < div fs-list-element = "item" fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > < span fs-list-field = "question" > Question </ span > </ button > < div fs-accordion-element = "content" > < p fs-list-field = "answer" > Answer </ p > </ div > </ div > </ div >
When using accordions with fs-list, accordion states are automatically managed when list items are filtered or paginated.
Nested Accordions Create nested accordions by placing accordion elements inside content areas:
< div fs-accordion-element = "group" > <!-- Parent accordion --> < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > Parent Item </ button > < div fs-accordion-element = "content" > < p > Parent content </ p > <!-- Nested accordion group --> < div fs-accordion-element = "group" > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > Child Item 1 </ button > < div fs-accordion-element = "content" > < p > Child content 1 </ p > </ div > </ div > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > Child Item 2 </ button > < div fs-accordion-element = "content" > < p > Child content 2 </ p > </ div > </ div > </ div > </ div > </ div > </ div >
Accessibility The accordion attribute automatically implements accessibility features:
Proper ARIA attributes (aria-expanded, aria-controls)
Keyboard navigation (Space and Enter keys)
Focus management
Screen reader announcements
Manual Accessibility If needed, you can add additional ARIA attributes:
< div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" aria-label = "Expand to read more about this topic" > Accordion Title </ button > < div fs-accordion-element = "content" > Content </ div > </ div >
Complete Examples FAQ Accordion
Multiple Groups
With Custom Styling
CMS Collection
< div fs-accordion-element = "group" fs-accordion-single = "true" fs-accordion-initial = "1" > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > < h3 > What is Finsweet Attributes? </ h3 > < div fs-accordion-element = "arrow" > ▼ </ div > </ button > < div fs-accordion-element = "content" > < p > Finsweet Attributes is a collection of powerful, no-code tools that extend Webflow's capabilities. </ p > </ div > </ div > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > < h3 > How do I install it? </ h3 > < div fs-accordion-element = "arrow" > ▼ </ div > </ button > < div fs-accordion-element = "content" > < p > Simply add the script tag to your Webflow project and start using the attributes. </ p > </ div > </ div > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > < h3 > Is it free? </ h3 > < div fs-accordion-element = "arrow" > ▼ </ div > </ button > < div fs-accordion-element = "content" > < p > Yes! All Finsweet Attributes are completely free and open source. </ p > </ div > </ div > </ div >
Common Use Cases FAQ Section Create an FAQ section where only one question is open at a time:
< div fs-accordion-element = "group" fs-accordion-single = "true" > <!-- FAQ items --> </ div >
Feature List Create an expandable feature list where multiple items can be open:
< div fs-accordion-element = "group" > <!-- Feature items --> </ div >
Create collapsible navigation sections:
< nav > < div fs-accordion-element = "accordion" > < button fs-accordion-element = "trigger" > Getting Started </ button > < div fs-accordion-element = "content" > < a href = "/intro" > Introduction </ a > < a href = "/install" > Installation </ a > </ div > </ div > </ nav >
Do not use Webflow Interactions on the same elements that have fs-accordion attributes. This can cause conflicts and unexpected behavior.
Browser Support The fs-accordion attribute is compatible with all modern browsers and IE11+.