
- 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 - Toggler Javascript Reference
Foundation provides JavaScript components for toggler as listed below.
Initializing
You can initialize toggle in JavaScript by using the foundation.toggler.js and foundation.core.js plugins. The plugin requires the following libraries −
foundation.util.motion.js
Foundation.Toggler
It specifies instance of a Toggler as defined below −
var elem = new Foundation.Toggler(element);
Sr.No. | Name & Description | Type |
---|---|---|
1 |
element It creates a jQuery object into a Toggler. |
jQuery |
2 |
options Default plugin setting is override. |
Object |
Plugin Options
You can use the following plugin to customize the Toggler instance. You can set the plugin option as individual data attributes.
Sr.No. | Name & Description | Example |
---|---|---|
1 |
animate Tells the plugin to animate the element when toggled. |
false |
Events
The toggler plugin attached to any element can trigger the following event.
Sr.No. | Name & Description |
---|---|
1 |
on.zf.toggler It triggers an event when the target element consists of a class after toggle. |
2 |
off.zf.toggler It triggers an event when the target element does not have a class after toggle. |
Functions
The following are the functions used in toggler.
.toggle
Depending upon the state on or off the event is fired from the original trigger. It toggles the target class onto the target element.
.destroy
The instance of toggler is destroyed.