JSFiddle - React, Tailwind, and code Playground
HTML
<div>
Something
</div>
<button id="b1">
Button to hide
</button>
<div>
Something
</div>
<button id="b2">
Button to toggle hiding
</button>
CSS
#b1 {
display: inline-block;
height: 63px;
transition: height 250ms ease-in-out;
overflow: hidden;
}
#b1.hidden {
height: 0px;
}
JavaScript
const buttonToHide = document.getElementById("b1");
document.getElementById("b2").addEventListener('click', () => {
if (buttonToHide.classList.contains("hidden")) {
buttonToHide.classList.remove("hidden");
} else {
buttonToHide.classList.add("hidden");
}
})