JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<a href="#" class="off" onclick="tog(this)"><div>
one
</div></a>

<a href="#" class="on" onclick="tog(this)"><div>
two
</div></a>

<a href="#" class="off" onclick="tog(this)"><div>
three
</div></a>

<a href="#" class="off" onclick="tog(this)"><div>
four
</div></a>

<a href="#" class="on" onclick="tog(this)"><div>
five
</div></a>

<a href="#" class="off" onclick="tog(this)"><div>
six
</div></a>

<a href="#" class="off" onclick="tog(this)"><div>
seven
</div></a>

CSS

.on div {background-color:#999;}
.off div {background-color:#dedede;}

JavaScript

function tog(el){



var divs = document.getElementsByClassName("on");

    for(var i = (divs.length - 1); i >= 0; i--)
    {
        
        divs[i].className = "off";
    }


if(el.className == "off"){
		el.className = "on";
	} else {
		el.className = "off";
	}
}