---
title: Accordion
---
***
{{> examples_accordion_intro}}
***
Basic
You can create an accordion using minimal markup like so:
HTML
{{#markdown}}
```html
{{> examples_accordion_basic}}
```
{{/markdown}}
Rendered HTML
{{> examples_accordion_basic}}
***
Distributed accordion groups
You can name the accordion so that it can be spread across different parent containers. In this example the accordion is named *myAccordionGroup* and it is split between different columns in a block grid. This allows the accordion to be responsive to screen width.
HTML
{{#markdown}}
```html
{{> examples_accordion_grid}}
```
{{/markdown}}
Rendered HTML
{{> examples_accordion_grid}}
***
### Callbacks
There are two ways to bind to callbacks in your tabs.
{{#markdown}}
Callback function
```html
```
{{/markdown}}
{{#markdown}}
Toggled Event
```html
```
{{/markdown}}
***
## Customize with Sass
Accordions can be easily customized with the Sass variables provided in the `_settings.scss` file.
SCSS
{{> examples_accordion_variables}}
***
## Configure With Javascript
It's easy to configure dropdowns using our provided Javascript. You can use data-attributes or plain old Javascript. Make sure `jquery.js`, `foundation.js` and `foundation.accordion.js` have been included on your page before continuing. For example, add the following before the closing `` tag:
{{#markdown}}
```html
```
{{/markdown}}
### Optional Javascript Configuration
#### JS
{{#markdown}}
```js
$(document).foundation({
accordion: {
// specify the class used for accordion panels
content_class: 'content',
// specify the class used for active (or open) accordion panels
active_class: 'active',
// allow multiple accordion panels to be active at the same time
multi_expand: false,
// allow accordion panels to be closed by clicking on their headers
// setting to false only closes accordion panels when another is opened
toggleable: true
}
});
```
{{/markdown}}
***
## Semantic Markup With Sass Mixins
You can use the a `accordion-container()`, `accordion-navigation`, and `accordion-navigation` mixins to create your own accordion with semantic markup, like so:
SCSS
{{#markdown}}
```scss
.your-accordion-class {
@include accordion-container;
.your-accordion-navigation-class {
@include accordion-navigation;
}
.your-accordion-content-class {
@include accordion-content;
}
}
```
{{/markdown}}
##### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/accordion";
```