JSFiddle - React, Tailwind, and code Playground

by asifrc

HTML

<div class="container">
    <div id="left">
        <div class="module">Left Module</div>
        <div class="resetRight">
            <button id="rR">Reset Right</button>
        </div>
    </div>
    <div id="right">
        <div class="module">Right Module</div>
        <div class="resetLeft">
            <button id="rL">Reset Left</button>
        </div>
    </div>
</div>
<button id="hL">Hide Left</button>
<button id="hR">Hide Right</button>

CSS

#left, #right {
    width: 150px;
    border: 1px solid #000;
}
#left {
    float: left;
}
#right {
    float: right;
}
/* Keep buttons hidden by default */
 .resetLeft, .resetRight {
    display: none;
}
/* Hide Left when hideLeft class is added to container */
 .hideRight #right {
    display: none;
}
/* Show resetLeft when hideLeft class is added to container */
 .hideLeft #right .resetLeft {
    display: block;
}
/* Hide Right when hideRight class is added to container */
 .hideLeft #left {
    display: none;
}
/* Show resetRight when hideRight class is added to container */
 .hideRight #left .resetRight {
    display: block;
}

JavaScript

//hide left
 $('#hL').click(function () {
     //Add hideLeft class to container
     $('.container').addClass('hideLeft');
 });
 //hide right
 $('#hR').click(function () {
     //Add hideLeft class to container
     $('.container').addClass('hideRight');
 });

 //reset left
 $('#rL').click(function () {
     //Add hideLeft class to container
     $('.container').removeClass('hideLeft');
 });
 //reset Right
 $('#rR').click(function () {
     //Add hideLeft class to container
     $('.container').removeClass('hideRight');
 });