{"id":36,"date":"2025-09-26T08:50:51","date_gmt":"2025-09-26T08:50:51","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/accordion\/"},"modified":"2025-09-27T08:48:09","modified_gmt":"2025-09-27T08:48:09","slug":"accordion","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/accordion\/","title":{"rendered":"Accordion"},"content":{"rendered":"\n

ska-theme includes an Alpine.js component for creating an accordion.<\/p>\n\n\n\n

Module arguments<\/span>TypeScript<\/span><\/header>
interface AccordionConfig {\n\t\/** Only one accordion open at the same time. *\/\n\texclusive?: boolean\n\t\/** Ensure opened accordion content will be visible on the screen (default: true). *\/\n\tscrollIntoView?: boolean\n\t\/** Transition duration in ms (default: 350). *\/\n\ttransitionDuration?: number\n}<\/code><\/pre><\/div><\/div>\n\n\n\n
For creating an accordion, add the x-data=\"skaAccordion\"<\/code> attribute to the root element.
All direct children of that element should have the attribute x-bind=\"item\"<\/code>.
The item elements should have 2 child elements, one with x-bind=\"toggle\"<\/code> and another with x-bind=\"content\"<\/code>.<\/p>\n\n\n\n
There is 1 argument available for the skaAccordion<\/code> component: exclusive<\/code>. Using x-data=\"skaAccordion({exclusive: true})\"<\/code> will ensure that only 1 accordion tab is open at the same time.<\/p>\n\n\n\n
To have an accordion section be open initially, add the active<\/code> class to that section.<\/p>\n\n\n\n
Tip<\/strong>: Don’t add margin or padding to the [x-bind=\"content\"]<\/code> element, because that can prevent the animation from being smooth. Instead, wrap the contents of that element with another element or add margin\/padding to the first child.<\/p>\n\n\n\n
Example accordion<\/h2>\n\n\n
\n
\n
\n
\n