Accordion Menu JavaScript Reference

Foundation provides JavaScript components for an accordion menu as listed below.

Initializing

You can initialize the accordion menu in JavaScript by using foundation.accordionmenu.js and foundation.core.js plugins. The plugin requires the following libraries −

  • foundation.util.keyboard.js

  • foundation.util.motion.js

  • foundation.util.nest.js

Foundation.AccordionMenu

It specifies instance of a accordion menu as defined below −

var elem = new Foundation.AccordionMenu(element);

Sr.No. Name & Description Type
1

element

It creates a jQuery object into a accordion menu.

 jQuery
2

options

Default plugin setting is override.

 Object

Plugin Options

You can use the following plugin to customize the accordion menu instance. You can set the plugin option as individual data attributes.

Sr.No. Name & Description Example
1

slideSpeed

Set the time in ms(millisecond) to animate the opening of a submenu.

 250
2

multiOpen

Multiple open panes are allowed in the menu.

 true

Events

The accordion menus plugin attached to any element can trigger the following event.

Sr.No. Name & Description
1

down.zf.accordion menu

It triggers an event when the menu is collapsed up.
2

up.zf.accordion menu

It triggers an event when the menu is collapsed down.

Functions

The following are the functions used in accordion menu.

.hideAll

It closes all panes of the menu that are opened.

.toggle

It toggles on submenu open/close state.

Sr.No. Name & Description Type
1

$target

Toggle the submenu.

 jQuery

.down

The submenus are opened defined by $target.

Sr.No. Name & Description Type
1

$target

Opens the submenu.

 jQuery

.up

The submenus are closed defined by $target. It also closes the submenus that are present inside the target.

Sr.No. Name & Description Type
1

$target

Closes the submenus.

 jQuery

.destroy

The accordion menu is destroyed.

foundation_navigation.htm
Advertisements