JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

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


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

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

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

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

</div>

CSS

.leftBigWraper{display:block;position:relative;}

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

.show{display: block; }

.pilihWarna li{margin:10px;width:50px;height:50px;background: red;float:left;cursor:pointer;}

JavaScript

var currentDiv = 0;

$(document).ready(function(){
    $(".pilihWarna li").click(function(){
        $(".leftBigWraper .bigandsmall").eq($(this).index()).css( "display", "block" );
        
        if($(this).index()!=currentDiv)
        {$(".leftBigWraper .bigandsmall").eq(currentDiv).css("display","none");}
        currentDiv=$(this).index();
    })
});