JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<ul class="pilihWarna">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>    


<div class="container">
    <div> this is the div that is ready. This div has no ID and has the same class with others </div>

    <div> this is the second div that is hidden. This div has no ID and has the same class with others </div>

    <div> this is the third div that is hidden. This div has no ID and has the same class with others </div>

    <div> this is the second div that is hidden. This div has no ID and has the same class with others </div>

</div>

CSS

.container div{ margin:10px;padding:5px;background: #f1f3f5;float:left;display:none;cursor:pointer;}
.container div:first-child{display : block;}
.show{display: block; }

.button-container div{margin:10px;width:50px;height:50px;background: red;float:left;cursor:pointer;}

JavaScript

var currentDiv = 0;

$(document).ready(function(){
    $(".button-container div").click(function(){
        $(".container div").eq($(this).index()).css( "display", "block" );
        
        if($(this).index()!=currentDiv)
        {$(".container div").eq(currentDiv).css("display","none");}
        currentDiv=$(this).index();
    })
});