# Accordion ## Usage The Accordion component consists of a parent container with the `data-z-accordion` attribute, and a title and content part for each accordion item. | Class | Description | | ----------------------- | -------------------------------------------------------------------------- | | `.z-accordion-title` | Defines and styles the toggle for each accordion item. Use `` elements. | | `.z-accordion-icon` | Defines and styles the icon part for each accordion item. | | `.z-accordion-content` | Defines the content part for each accordion item. | ```html ``` ```html ``` ## No collapsing By default, all accordion items can be collapsed. To prevent this behavior and always maintain one open item, add the `collapsible: false` option to the attribute. ```html ``` ```html ``` ## Multiple open items To display multiple content sections at the same time without one collapsing when the other one is opened, add the `multiple: true` option to the `data-z-accordion` attribute. ```html ``` ```html ``` ## Set open items To specify which items should be opened initially, add the `.z-open` class to the item. You can also use this to open multiple items. Just make sure to add the option `multiple: true` to the `data-z-accordion` attribute. Note Alternatively, you can open a single item by adding the `active: ` option to the `data-z-accordion` attribute, e.g. `active: 1` to show the second element (the index is zero-based). Note that this will overwrite the `z-open` class. ```html ``` ```html ``` ## Component options Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. [Learn more](/docs/latest/kit/javascript#component-configuration) | Option | Value | Default | Description | | ------------- | ------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `active` | Number | `false` | Index of the element to open initially. | | `animation` | Boolean | `true` | Reveal item directly or with a transition. | | `collapsible` | Boolean | `true` | Allow all items to be closed. | | `content` | String | `> .z-accordion-content` | The content selector, which selects the accordion content elements. | | `duration` | Number | `200` | Animation duration in milliseconds. | | `multiple` | Boolean | `false` | Allow multiple open items. | | `targets` | String | `> *` | CSS selector of the element(s) to toggle. | | `toggle` | String | `> .z-accordion-title` | The toggle selector, which toggles accordion items. | | `transition` | String | `ease` | The transition to use when revealing items. Use keyword for [easing functions](https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function#Keywords_for_common_timing-functions). | | `offset` | Number | `0` | Pixel offset added to scroll top. | ## JavaScript Learn more about [JavaScript components](/docs/latest/kit/javascript#programmatic-use). ### Initialization ```javascript zUIkit.accordion(element, options); ``` ### Events The following events will be triggered on elements with this component attached: | Name | Description | | ------------ | ---------------------------------------------------------------------------------------------- | | `beforeshow` | Fires before an item is shown. Can prevent showing by calling `preventDefault()` on the event. | | `show` | Fires after an item is shown. | | `shown` | Fires after the item's show animation has completed. | | `beforehide` | Fires before an item is hidden. Can prevent hiding by calling `preventDefault()` on the event. | | `hide` | Fires after an item's hide animation has started. | | `hidden` | Fires after an item is hidden. | ### Methods The following methods are available for the component: #### Toggle ```javascript zUIkit.accordion(element).toggle(index, animate); ``` Toggles the content pane. | Name | Type | Default | Description | | --------- | -------------------- | ------- | -------------------------------------------- | | `index` | String, Number, Node | 0 | Accordion pane to toggle. 0 based index. | | `animate` | Boolean | true | Suppress opening animation by passing false. | ## Accessibility The Accordion component adheres to the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) and automatically sets the appropriate WAI-ARIA roles, states and properties. - The _titles_ have an ID, the `button` role, the `aria-expanded` state and the `aria-controls` property set to the ID of the respective content. - The _contents_ have an ID, the `region` role and the `aria-labelledby` property set to the ID of the respective title. ### Keyboard interaction The Accordion component can be accessed through keyboard using the following keys. - The tab or shift+tab keys navigate through accordion titles. - The enter or space key toggles the content of the focused title.