An accordion must be structured using an unordered or ordered list. Every item in the list should have an accompanying header and section with associated data attributes. The header will be bound with a click event that toggles the display of its sibling section, while also closing other sections (can be changed through options).

<ul class="accordion" data-accordion> 
        <header class="accordion-header" data-accordion-header>
            Section Header
        <section class="accordion-section" data-accordion-section>
            <div class="accordion-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Quisque ipsum sem, faucibus a consectetur vel, dictum ut sapien.
                Suspendisse at odio ut risus sagittis viverra et vitae tortor.
                Fusce id aliquam enim, ac blandit dolor. Vivamus porta convallis vestibulum.
                Suspendisse pretium, dolor quis semper ultricies, magna felis aliquam nisl,
                at semper mauris sem non purus. Vivamus a felis nibh. Praesent nec elementum nulla,
                quis egestas nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

Once the markup is in place, an accordion can be initialized.

The data-accordion-* attributes are required so that the JavaScript layer can find or bind elements in the DOM.
Accordions can be nested by utilizing component namespaces.
The .accordion-section class is required for slide animations. Applying padding to this element will break the slide logic, so style .accordion-body instead.


  • The [data-accordion-header] will be clickable, no need for anchor tags.
  • The .show and .hide classes will be toggled on the [data-accordion-section] to trigger slide animations.
  • The currently open section will have an .is-active class on the parent li.


The tab, tablist, and tabpanel roles, and the appropriate aria-* attributes are required when supporting ARIA.

<ul class="accordion" role="tablist">
        <header class="accordion-header" role="tab" data-accordion-header>...</header>
        <section class="accordion-section" role="tabpanel" data-accordion-section>...</section>
The JavaScript component will automatically map all ARIA attributes.


Variable Default Description
$accordion-class .accordion CSS class name for the accordion wrapper.
$accordion-class-body .accordion-body CSS class name for the accordion section inner body.
$accordion-class-header .accordion-header CSS class name for the accordion header.
$accordion-class-section .accordion-section CSS class name for the accordion section.
$accordion-transition .3s The transition time for accordion slide animations.


Inherits all options from the parent Component.

Option Type Default Description
collapsible bool false Allows the open section to be closed, without having to open another section.
defaultIndex int 0 The index of the section to open on page load.
mode string click The type of interaction for toggling a section. Accepts click or hover.
multiple bool false Allows multiple sections to be open simultaneously. Will override the collapsible option.


Inherits all events from the parent Component.

Event Arguments Description
showing element:section, element:header, int:oldIndex Triggered before a section is shown.
shown element:section, element:header, int:newIndex Triggered after a section is shown.


Inherits all properties from the parent Component.

Property Type Description Found With
headers collection A collection of header elements within the accordion. [data-accordion-header]
index int The index of the currently opened section.
node element The header element of the currently open section.
sections collection A collection of section elements within the accordion. [data-accordion-section]


Inherits all methods from the parent Component.

Method Description Bound To
calculate([func:callback]) Calculate and cache the heights of each section. An optional callback can be passed to fetch the height.
jump(int:index) Open a specific section using the index in the collection.
show(element:header) Open a specific section using the sibling header. [data-accordion-header]