JSFiddle - React, Tailwind, and code Playground

by colorkid

HTML

<ul class="toggle-controls">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

CSS

.toggle-controls{
    display: flex;
    width: 250px;
    justify-content:space-around;
}
li{
    border:1px solid black;
    width:20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    list-style: none;
}
.active{
     border-color: red;
}

JavaScript

var controls = document.querySelectorAll('.toggle-controls li');
var space = document.querySelector('div.space');

function toggleFilter(control) {
    for (var i = 0; i < controls.length; i++) {
        controls[i].classList.remove('active');
    }
    control.classList.add('active');
}

function clickControl(control) {
    control.addEventListener('click', function() {
        toggleFilter(control);
    });
}

for (var i = 0; i < controls.length; i++) {
    clickControl(controls[i]);
}