JSFiddle - React, Tailwind, and code Playground
HTML
<div id="about">
My About Div
</div>
<div id="contact">
My Contact Div
</div>
<div id="slider">
Content Div
</div>
CSS
div {
height: 100px;
background-color: red;
border: 1px solid #000;
text-align: center;
color: white;
font-size: 2em;
}
#about, #contact {
cursor: pointer;
}
JavaScript
var slideInProgress = false;
$('#about').click(function(){
if (!slideInProgress) {
slideInProgress = true;
$("#slider").slideToggle(5000, function(){
slideInProgress = false;
});
}
});
$('#contact').click(function(){
if (!slideInProgress) {
slideInProgress = true;
$("#slider").slideToggle(5000, function(){
slideInProgress = false;
});
}
});