JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<div class='btn'>
    <button id='btn1'>Red</button>
</div>

<div class='btn' >
    <button id='btn2'>Green</button>
</div>

<div id='ored' style='display: none'>
    <div id='red'></div> 
</div>


<div id='ogreen'  style='display: none'>
     <div id='green'></div> 
</div>

CSS

#red {
    height: 40px;
    width: 100%;
    background-color: red;
   
}
#green {
    height: 40px;
    width: 100%;
    background-color: green;
   
}

JavaScript

$('#btn1').click(function() {
    $('#ored').toggle();
    document.getElementById('ogreen').style.display = 'none';
});

$('#btn2').click(function() {
    $('#ogreen').toggle();
    document.getElementById('ored').style.display = 'none';
});