data-ix-accordion
accordion
Summary
This solution allows you to create accordion or dropdown elements with advanced options for keeping only one open, starting with one open or more.
01
Prefix
As with all attributes in this library all attributes in used when implementing this solution start with the following prefix: if you see the tag {prefix} used on this page it refers to the following prefix:
02
Elements
The accordion solution has three layers of elements. They are listed from outer to inner below.
Copy Elements To Webflow:
Note - use the CSS in the notes section to make the element work as expected.
Attribute Name
Value
Default
Description
data-ix-accordion=wrap
wrap
boolean
The element containing all your acccordion items, this will be the element where you apply the option attributes.
data-ix-accordion=item
wrap
boolean
An accordion item, each one needs to container an open element to trigger the interaction, and will receive an is-active class to track open and closed states.
data-ix-accordion=open
wrap
boolean
The trigger element that will activate an open or close interaction. Usually the top half of the accordion.
03
Options
All options are applied to the data-ix-accordion=wrap element.
Attribute Name
Value
Default
Description
{prefix}-first-open
boolean
false
The first accordion in the list will start open
{prefix}-one-active
boolean
false
Only one accordion can be active at a time, if a new one is opened the last one will close.
{prefix}-keep-one-open
boolean
false
One accordion must always be open at a time, will prevent closing the last open accordion.
{prefix}-hover
boolean
false
Trigger open on hover instead of click
04
Notes
The default interaction does not actually animate the elements, it just tracks the active state. To animate the accordion use the CSS to animate the accordion bottom from 0fr grid-template-rows to 1fr. Tutorial here.
The custom CSS I use for accordion animations is below. Just make sure the bottom elements first child is set to overflow hidden.
/* Accordion Close State */
.faq_item_bottom {
padding-top: 0rem; /*Optional if padding is needed*/
grid-template-rows: 0fr;
transition-property: grid-template-rows, padding;
transition-duration: 600ms;
transition-timing-function: ease;
}
/* Open Accordion when Active class is added or in design mode */
:is(.is-active, .wf-design-mode) .faq_item_bottom {
padding-top: 0rem; /*Optional if padding is needed*/
grid-template-rows: 1fr;
}
/* Active State for the Icon*/
:is(.is-active, .wf-design-mode) .faq_item_icon{
transform: rotate(270deg);
}
