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