Accordion examples


Assumes allowMultiple and allowToggle are both false

Allow multiple

allowMultiple = true. Assumes allowToggle is true

Allow toggle

allowToggle = true. Assumes allowMultiple is false

With one item opened

With 2 items opened

disabled and allowToggle and allowMultiple

will hide the show/hide info and disable click in items

With heading

Accordion example

With heading level 4

headingLevel is 4 in this example. The headings in this component start with h4 in this example. h4 for the heading and h5 inside the buttons.

This header starts with h4

With heading and show controls

Accordion example

with custom show/hide info

The last item has empty strings to don't show any info

with html in headers

To avoid event problems, use pointer-events-none class in subelements

With classes applied

Show code to display the classes applied in html

Accordion example

With attributes applied

Show code to display the attributes applied in html