JSFiddle - React, Tailwind, and code Playground
HTML
<button class="open-mypage1">Open my page ?</button>
<div id="mypage-info1">
Some content here
</div>
<button class="open-mypage2">Open my page ?</button>
<div id="mypage-info2">
Some content here
</div>
CSS
div {
border: 1px solid black;
width: 200px;
height: 200px;
}
JavaScript
$('.open-mypage1').click(function () {
$('#mypage-info1').slideToggle('2000',"swing", function () {
// Animation complete.
});
});
$('.open-mypage2').click(function () {
$('#mypage-info2').slideToggle('2000', "easeOutBounce", function () {
// Animation complete.
});
});