- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
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.
To Continue Learning Please Login
Login with Google