--- name: accordion url: /accordion title: Accordion ---

Accordion

The trusty accordion allows you to create a series of vertical tabs containing various content.


Content goes here Content goes here Content goes here

Basic HTML

You can create an accordion with this basic directive

Content goes here Content goes here Content goes here
Content goes here Content goes here Content goes here

Advanced HTML

You can create advanced versions of an accordion with these additional directive options

Auto open opens the first tab on render. Collapsible allows toggable tabs. Click on a tab to open or close it. Multi open allows for multiple tabs to be open at once.
Auto open opens the first tab on render. Defaults to "true" Collapsible allows toggable tabs. Click on a tab to open or close it. Defaults to "false" Multi open allows for multiple tabs to be open at once. Defaults to "false". When true, it forces collapsible to be "true" as well. It cannot be overriden.

Sass Mixins

Use our mixins to write a custom accordion. There are only mixins for the two components of accordion items: the title and the content.

.custom-accordion-title { @include accordion-title( $background: #fff, // Default background $background-hover: #fff, // Background on hover $background-active: #fff, // Background when active $color: #000, // Default color $color-active: #000, // Color when active $padding: 1rem ); } .custom-accordion-content { @include accordion-content( $padding: 1rem ); }

Sass Variables

You can customize the accordion with these variables in _settings.scss