JSFiddle - React, Tailwind, and code Playground
HTML
<button id="myButton">Toggle</button>
<p id="myText">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
CSS
.hide{
position:absolute !important;
top:-99999px !important;
left:-999999px !important;
}
body{
padding:50px;
}
JavaScript
var visible = true,
button = $('#myButton'),
text = $('#myText'); // Get all Elements here
button.click(function() { // Attach Button Click here
if (visible) { // Is visible
//Yes visible
text.slideToggle('fast', function() { // Add display:none and animate with 200 msec pace
text.addClass('hide').slideToggle(0); // Remove display:none and add your custom css code very quickly with no delay(User should not see any flashing
});
} else {
//No, not visible
text.slideToggle(0, function() { // tried to Remove display:none, but it is not there so add display:none but do it quickly
text.removeClass('hide').slideToggle('fast'); // Remove custom class and just add remove display:none with 200 msec pace
});
}
visible = !visible; // Toggle visibility
});