Accordion Menu
JavaScriptChange 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. |
JavaScript Reference
Initializing
The following files must be included in your JavaScript to use this plugin:
foundation.core.js-
foundation.accordionMenu.js- With utility library
foundation.util.keyboard.js - With utility library
foundation.util.motion.js - With utility library
foundation.util.nest.js
- With utility library
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 |
|
|
Amount of time to animate the opening of a submenu in ms. |
data-multi-open |
|
|
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.
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
