Toggle - Done
Description
The Toggle element is built upon webflow.js. It allows users to switch between two states (e.g., on/off, enabled/disabled) with a smooth animation.
Dependecies
Some dependencies are taken care of by Global Dependencies and are provided here for reference.
Module | Global Depenedency |
|---|---|
jQuery | Yes |
webflow.js | Yes |
HTML
Example ON State
<div class="toggle-container" data-tippy-content="{tooltip}">
<a href="#" data-ix="toggle" class="toggle-button active w-inline-block" role="button" aria-pressed="true" tabindex="0">
<div class="toggle-button-knob active"></div>
</a>
</div>Example OFF State
<div class="toggle-container" data-tippy-content="{tooltip}">
<a href="#" data-ix="toggle" class="toggle-button w-inline-block" role="button" aria-pressed="false" tabindex="0">
<div class="toggle-button-knob"></div>
</a>
</div>Breakdown
- .toggle-container: The main wrapper for the toggle component.
- data-tippy-content: Attribute used for tooltip content.
- .toggle-button: The clickable element that triggers the toggle action.
- data-ix="toggle": Attribute to bind interaction or animation (specific to webflow.js interactions).
- .active: Class indicating the current state (active/on).
- .toggle-button-knob: The movable part of the toggle that visually represents the state.
Events & Interactions
The toggle component leverages webflow.js for interactions. When the toggle button is clicked:
- State Change: The active class is toggled on both .toggle-button and .toggle-button-knob.
- Custom Events: You can listen for state changes to trigger additional functionality.
Listening to Toggle Events
document.querySelectorAll('.toggle-button').forEach(function(toggle) {
toggle.addEventListener('click', function(event) {
event.preventDefault();
toggle.classList.toggle('active');
const knob = toggle.querySelector('.toggle-button-knob');
knob.classList.toggle('active');
// Trigger custom event or callback
const isActive = toggle.classList.contains('active');
// Add your custom logic here
});
});