---
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_rendered}}
Note: Accordion used to require ```
``` and ```- ``` markup. It now works with ```
```'s and ```- ```'s as well. You need v5.5+ to use the newer markup.
***
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}}
***
### Adding New Accordion Content After Page Load
If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:
{{#markdown}}
```javascript
$(document).foundation();
```
{{/markdown}}
Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.
{{#markdown}}
```javascript
$(document).foundation('accordion', 'reflow');
```
{{/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";
```