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 example off state 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 }); });