Accordion

Accordion

The accordion can be used to reveal more details about something, or for definitions, 'read more...' and such. They are easily created, the most difficult part seems to be spelling the word 'accordion' correctly! (Against some people's belief, it's NOT 'accordian'!)

By default there is always one panel open. But it is also possible to have them all closed, or all opened by adding the appropriate attribute.

You can pop anything into an accordion panel. The panels have the height set to 0px, so to edit the contents you need to give it some temporary height, and then set it back to zero when done.

Placeholder Picture

Download the default accordion component

Placeholder Picture

Download the all-closed accordion component

Placeholder Picture

Download the multi-open accordion component