Properties
These properties can send along with the Accordion.Provider or Accordion.Group. It will affect every nested Accordion.
| Accordion Properties | Description |
|---|---|
id | (optional) a unique id that will be used on the button element. If you use remember_state, an id is required. |
title | (optional) a title as a string or React element. It will be used as the button text. |
expanded | (optional) if set to true the accordion will be expanded as its initial state. |
expanded_ssr | (optional) if set to true the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that's mainly a technical aspect to consider. |
remember_state | (optional) if set to true, it will remember a changed state initiated by the user. It requires a unique id. It will store the sate in the local storage. |
flush_remembered_state | (optional) if set to true, the saved (remembered) will be removed and the initial component state will be used and set. |
no_animation | (optional) if set to true, the open and close animation will be omitted. |
variant | (optional) defines the used styling. As of now, only outlined is available. Use plain for no styles. It defaults to outlined. |
icon | (optional) will replace the chevron icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state { closed, expanded }. |
icon_position | (optional) will set the placement of the icon. Defaults to left. |
icon_size | (optional) define a different icon size. Defaults to medium (1.5rem). |
left_component | (optional) will add a React element on the left side of the title, inside AccordionHeaderContainer. |
prerender | (optional) if set to true the content will be present, even the accordion is not expanded. Can be useful for assistive technology or SEO. |
prevent_rerender | (optional) if set to true the accordion component will not re-render its content – can be useful for widgets you don't have control of storing the temporary state during an interaction. |
prevent_rerender_conditional | (optional) use this prop together with prevent_rerender – and if it is to true, the accordion component will re-render if the children are a new React element and does not match the previous one anymore. |
single_container | (optional) if set to true, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens. |
element | (optional) gives you the option to replace the used button element. Provide a React element, including a string (HTML element). Defaults to a div with all the needed accessibility features included. |
heading | (optional) if set to true, level 2 (h2) will be used. You can provide your own HTML heading (h3), or provide a heading_level property. |
heading_level | (optional) if heading is set to true, you can provide a numeric value to define a different heading level. Defaults to 2. |
disabled | (optional) if set to true, the accordion button will be disabled (dimmed). |
skeleton | (optional) if set to true, an overlaying skeleton with animation will be shown. |
contentRef | (optional) send along a custom React Ref for .dnb-accordion__content. |
| Space | (optional) spacing properties like top or bottom are supported. |
| Accordion.Provider and Accordion.Group Properties | Description |
|---|---|
group | (optional) define a unique id, it will be used to "group" several accordions into one. |
allow_close_all | (optional) if set to true, the group of accordions will allow all to close. |
expanded_id | (optional) define an id of a nested accordion that will get expanded. |
| Space | (optional) spacing properties like top or bottom are supported. |