--- title: Accordion ---

Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.

*** {{> 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"; ```