Accordion

A standard accordion

Styled

A styled accordion adds basic formatting

Fluid

An accordion can take up the width of its container

Inverted

An accordion can be formatted to appear on dark backgrounds

Nested Accordions

An accordion can have multiple levels of nested content. This content can either be in a nested accordion or simply another level of title and content

Level 1A Contents

Level 1A-A Content Level 1A-B Content

Level 1B Contents

Level 1C Contents

Level 2 Content

Changing Trigger

An accordion normally triggers when its title is clicked. However you can change the trigger selector to specify an element inside a title to use as an activator

Form Fields

An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.

Sign Up

Accordion Menu

An accordion can be used to create content drawers inside a menu