Creare uno switch toggle con CSS e JavaScript

In questo articolo vedremo come realizzare uno switch toggle usando i CSS e JavaScript. Questo tipo di componenti è molto popolare nelle interfacce web.

Partiamo da una semplice struttura HTML:

<input type="checkbox" class="toggle" name="toggle" value="1">

Come primissima operazione, dobbiamo racchiudere questo elemento checkbox in un contenitore con una classe specifica in modo da permettere l'applicazione degli stili CSS.

function setToggleStructure() {
        const toggles = document.querySelectorAll('.toggle');
        if(toggles.length === 0) {
            return;
        }
        for(const toggle of toggles) {
            const parent = toggle.parentElement;
            const wrapper = document.createElement('div');
            wrapper.className = 'toggle-wrap';
            wrapper.innerHTML = toggle.outerHTML;
            parent.appendChild(wrapper);
            toggle.remove();
        }
    }

A questo punto la struttura del DOM apparirà come segue:

<div class="toggle-wrap">
   <input type="checkbox" class="toggle" name="toggle" value="1">
</div>

Con i CSS, nel contenitore andremo a posizionare l'elemento checkbox in primo piano azzerandone l'opacità e inseriremo un blocco creato con il contenuto generato sullo sfondo che avrà come larghezza la metà della larghezza di .toggle-wrap. Quando l'utente attiverà o disattiverà la checkbox, la classe .checked permetterà il movimento orizzontale del blocco.

.toggle-wrap {
    display: inline-block;
    width: 3.2rem;
    height: 1.7rem;
    background-color: #eee;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

.toggle-wrap:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 1;
    background-color: #d41d6d;
    transition: all 400ms ease-in;
    transform: translateX(0);
    border-radius: 5px;
    opacity: 0.4;
}

.toggle-wrap.checked:before {
    transform: translateX(100%);
    opacity: 1;
}

.toggle-wrap .toggle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

Ora con JavaScript dobbiamo gestire l'evento change sulla checkbox in modo da impostare la proprietà value sul valore corretto e aggiungere o rimuovere la classe .checked sul contenitore.

function handleToggleChange() {
        const toggles = document.querySelectorAll('.toggle');
        if(toggles.length === 0) {
            return;
        }
        for(const toggle of toggles) {
            toggle.addEventListener('change', () => {
                const parent = toggle.parentElement;
                if(toggle.checked) {
                    toggle.value = 1;
                } else {
                    toggle.value = 0;
                }
                parent.classList.toggle('checked');
            });
        }
    }

Possiamo invocare il nostro codice JavaScript quando il DOM è completamente caricato:

document.addEventListener('DOMContentLoaded', () => {
        setToggleStructure();
        handleToggleChange();
});

Demo

CSS Toggle

Conclusione

Uno switch toggle rappresenta l'esempio perfetto di interazione tra il livello presentazionale (CSS) e quello comportamentale (JavaScript) nella realizzazione di interfacce web.

Torna su