JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<ul id="tabs">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul id="items">
    <li>1</li>
    <li>2</li>
    <span>3</span>
    <li>4</li>
</ul>

JavaScript

var accordion = function(x,y){
	var item = document.getElementById(x).getElementsByTagName('li'),
        tabs,
		il = item.length,
        ac = function(x){
			item[x].onclick = function(){
				for(i=0; i<il; i++){
					item[i].style.color = "blue";
                    if(y !== undefined){
                    tabs[i].style.color = "blue";
                    }
				}console.log(i);
                
				this.style.color = "red";
                if(y !== undefined){
                tabs[x].style.color = "red";
                }
			}
        };
    if(y !== undefined){
        tabs = document.getElementById(y).getElementsByTagName('li');
    }
    for(var i=0; i<il; i++){
        ac(i);
		}
};

accordion('items');