JSFiddle - React, Tailwind, and code Playground
HTML
<div class="main-div">
<div class="title-div">
title
</div>
<div class="body-div">
body
</div>
</div>
<br>
<br>
<input class="btn" type="button" value="Toggle title visibility" />
CSS
.main-div {
height: 150px;
width: 150px;
background-color: lightgray;
border: 1px solid black;
}
.title-div {
height: 25px;
width: 100%;
background-color: lightblue;
}
.body-div {
height: calc(100% - 25px);
width: 100%;
background-color: green;
}
/* from bootstrap*/
.hidden {
display: none !important;
visibility: hidden !important;
}
JavaScript
$(".btn").click(function() {
$(".title-div").toggleClass("hidden");
});