--- 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_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"; ```