Accordion

Accordion is used to toggle between hiding and showing content.

Examples

To render accordion, use the class chi-accordion.

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content goes here

Content of Accordion item 1

Content of Accordion item 2

Content of Accordion item 1

Content of Accordion item 1.1

Content of Accordion item 1.2

Content of Accordion item 2

Content of Accordion item 2.1

Content of Accordion item 2.2

Make Accordions appear inactive by adding the class -disabled or the attribute disabled to Accordion trigger

Content goes here

Truncate long accordion titles by adding the class -truncated to chi-accordion.

Content goes here

Accordion supports the following sizes: sm, md (default), lg, and xl.

sm

Content goes here

md

Content goes here

lg

Content goes here

xl

Content goes here

JavaScript

Methods

Method
Description
Returns
hide() => void
Hides the accordion or individual accordion item (if provided)
Type: void
show() => void
Shows the accordion or individual accordion item (if provided)
Type: void
toggle() => void
Toggles active state (show/hide) of the accordion or accordion item (if provided)
Type: void
expandAll() => void
Expands all the accordion items
Type: void
collapseAll() => void
Collapses all the accordion items
Type: void

Preventing memory leaks

Accordion component has a dispose function to free all the resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

It is safe to call the accordion method more than once, as it will return any previously created accordion component associated with the element.

Accessibility

Accessibility guidelines coming soon