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