- 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
Foundation - JavaScript Reference
Foundation provides JavaScript components for an accordion as listed below.
Initializing
You can initialize the accordion in JavaScript by using foundation.accordion.js and foundation.core.js plugins. The foundation.core.js plugin requires following libraries −
foundation.util.keyboard.js
foundation.util.motion.js
Foundation.Accordion
It specifies instance of an accordion as defined below −
var my_element = new Foundation.Accordion(element);
The accordion includes one event as specified below −
Sr.No. | Name & Description | Type |
---|---|---|
1 |
element It creates a jQuery object into an accordion. |
jQuery |
Plugin Options
You can use the following plugin instances to customize the accordion instances.
Sr.No. | Name & Description | Example |
---|---|---|
1 |
slideSpeed It specifies the time taken to open an accordion. |
200 |
2 |
multiExpand It allows you to open multiple panes in an accordion. |
false |
3 |
allowAllClosed It will close all the panes of an accordion. |
false |
Events
Accordion plugin provides the following events as listed in the table −
Sr.No. | Name & Description |
---|---|
1 |
down.zf.accordion It triggers an event when you open the tab. |
2 |
up.zf.accordion It triggers an event when the tab is collapsing up. |
Events
Accordion plugin provides the following functions as listed below −
.toggle
It toggles the on and off state of the content pane. It contains the following event −
Sr.No. | Name & Description | Type |
---|---|---|
1 |
$target It creates jQuery object for toggling of pane. |
jQuery |
.down
It fires when you open the accordion tab. It includes the following events −
Sr.No. | Name & Description | Type |
---|---|---|
1 |
$target It opens the accordion pane. |
jQuery |
2 |
firstTime It specifies re-execution of the accordion. |
Boolean |
.up
It triggers when the tab is closed. It contains the following event −
Sr.No. | Name & Description | Type |
---|---|---|
1 |
$target It closes the accordion tab. |
jQuery |
.destroy
It ruins the instance of an accordion.
To Continue Learning Please Login
Login with Google