JSFiddle - React, Tailwind, and code Playground

by jsumners

HTML

<input type="button" id="collapseBtn" value="Collapse">&nbsp;
<input type="button" id="hideBtn" value="Hide">

<div id="con">
    <div id="yellow"></div>
    <div id="red"></div>
    <div id="blue"></div>
</div>

CSS

#con {
    background-color: green;
    height: 600px;
    position: relative;
    width: 800px;
}

#red {
    background-color: red;
    height: 200px;
    margin: 0 auto;
    width: 400px;
}

#blue {
    background-color: blue;
    height: 200px;
    margin: 0 auto;
    width: 400px;
}

#yellow {
    background-color: yellow;
    height: 200px;
    margin: 0 auto;
    width: 400px;
}

JavaScript

$('#collapseBtn').on('click', function() {
    $('#red').css('display', 'none');
    $('#hideBtn').prop('disabled', 'disabled');
});

$('#hideBtn').on('click', function() {
    $('#red').css('opacity', 0);
    $('#collapseBtn').prop('disabled', 'disabled')
});