JSFiddle - React, Tailwind, and code Playground

by lucyman76

HTML

<button type="button" id="div1">div1</button>
<button type="button" id='div2'>div2</button>
<button type="button" id='div3'>div3</button>
<div class="custom" id="div1"></div>
<div class="custom" id='div2'></div>
<div class="custom" id='div3'></div>

CSS

div#div1{
    background-color:#333333;
    height:100px;
    width: 100px;
}
div#div2{
    background-color:red;
    height:100px;
    width: 100px;
    display:none;
    
}
div#div3{
    background-color:lightgrey;
    height:100px;
    width: 100px;
    display:none;    
}

JavaScript

$('document').ready(function() {
    
    $('button[type="button"]').on('click', function() {
        $this = $(this);
        $("div.custom").each(function () {
            $(this).hide();
        })
         $('div#'+$this.attr('id')).css('display', 'block');
    });

});