Foundation
Jump to Nav

# Accordion Menu

JavaScript

Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.

## Basics

Accordion menus follow the basic Menu syntax of `<ul>`, `<li>`, and `<a>`. To convert a basic menu into an accordion, add the attribute `data-accordion-menu`. You probably also want it to be vertical, so add the class `.vertical` as well.

Any `<a>` will behave like a standard link. However, any `<a>` paired with a nested `<ul>` menu will then slide that sub-menu up and down when clicked on.

You can use the built-in `.nested` class to add an indent to a nested menu.

To have a sub-menu already open when the page loads, add the class `.is-active` to that sub-menu.

    <ul class="vertical menu" data-accordion-menu>
      <li>
        <a href="#">Item 1</a>
        <ul class="menu vertical nested">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a></li>
    </ul>

## Sass Reference

### Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$accordionmenu-arrows` | Boolean | `true` | Sets if accordion menus have the default arrow styles.
`$accordionmenu-arrow-color` | Color | `$primary-color` | Sets accordion menu arrow color if arrow is used.
`$accordionmenu-arrow-size` | Length | `6px` | Sets accordion menu arrow size if arrow is used.

## JavaScript Reference

### Initializing

The file `foundation.accordionMenu.js` must be included in your JavaScript to use this plugin, along with `foundation.core.js`. This plugin also requires these utility libraries:

- `foundation.util.keyboard.js`

- `foundation.util.motion.js`

- `foundation.util.nest.js`

### Foundation.AccordionMenu

Creates a new instance of an accordion menu.

    var elem = new Foundation.AccordionMenu(element, options);

Fires these events: AccordionMenu#event:init

Name | Type | Description
--- | --- | ---
`element` | jQuery | jQuery object to make into an accordion menu.
`options` | Object | Overrides to the default plugin settings.

### Plugin Options

Use these options to customize an instance of Accordion Menu. Plugin options can be set as individual data attributes, one combined `data-options` attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name | Type | Default | Description
--- | --- | --- | ---
`data-slide-speed` | `number` | `250` | Amount of time to animate the opening of a submenu in ms.
`data-multi-open` | `boolean` | `true` | Allow the menu to have multiple open panes.

### Events

These events will fire from any element with a Accordion Menu plugin attached.

Name | Description
--- | ---
`down.zf.accordionMenu` | Fires when the menu is done opening.
`up.zf.accordionMenu` | Fires when the menu is done collapsing up.

### Methods

#### hideAll

    $('#element').foundation('hideAll');

Closes all panes of the menu.

#### showAll

    $('#element').foundation('showAll');

Opens all panes of the menu.

#### toggle

    $('#element').foundation('toggle', $target);

Toggles the open/close state of a submenu.

Name | Type | Description
--- | --- | ---
`$target` | jQuery | the submenu to toggle

#### down

    $('#element').foundation('down', $target);

Opens the sub-menu defined by `$target`.

Fires these events: AccordionMenu#event:down

Name | Type | Description
--- | --- | ---
`$target` | jQuery | Sub-menu to open.

#### up

    $('#element').foundation('up', $target);

Closes the sub-menu defined by `$target`. All sub-menus inside the target will be closed as well.

Fires these events: AccordionMenu#event:up

Name | Type | Description
--- | --- | ---
`$target` | jQuery | Sub-menu to close.

#### destroy

    $('#element').foundation('destroy');

Destroys an instance of accordion menu.

Fires these events: AccordionMenu#event:destroyed