--- name: accordion url: /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

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

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 with accordions with these variables in _settings.scss

$accordion-border: 1px solid $gray-dark; $accordion-title-background: $gray-light; $accordion-title-background-hover: smartscale($accordion-title-background, 5%); $accordion-title-background-active: lighten($gray-light, 2); $accordion-title-color: isitlight($accordion-title-background); $accordion-title-color-active: isitlight($accordion-title-background); $accordion-title-padding: $global-padding; $accordion-content-padding: $global-padding;