---
title: Toggle - Done
slug: toggle-done
createdAt: 2025-01-28T18:16:35.417Z
---

::Image[]{src="https://api.archbee.com/api/optimize/ekdzobNU8PAqpbk3VU6LC-Knu_KuoaqW8AXK6l7dXJn-20250128-183349.png" size="28" width="274" height="140" position="center" showCaption="false"}

# 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**

```html
<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**

```html
<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:

1. State Change: The active class is toggled on both .toggle-button and .toggle-button-knob.
2. Custom Events: You can listen for state changes to trigger additional functionality.

### Listening to Toggle Events

```javascript
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
    });
});
```