JSFiddle - React, Tailwind, and code Playground

by franverona

HTML

<div id="contenttop">I'm at top
    <input id="seebot" type="button" value="See bot" />
</div>
<div id="contentbot">I'm at bot
    <input id="seetop" type="button" value="See top" />
</div>

CSS

#contenttop, #contentbot {
    width: 100%;
    height: 300px;
}
#contenttop {
    background-color: red;
}
#contentbot {
    background-color: yellow;
    display: none;
}

JavaScript

$('#seebot').click(function () {
    $('#contenttop').animate({
        height: 'toggle',
        opacity: 'toggle'
    });
    $('#contentbot').animate({
        height: 'toggle',
        opacity: 'toggle'
    });
});

$('#seetop ').click(function () {
    $('#contentbot').animate({
        height: 'toggle',
        opacity: 'toggle'
    });
    $('#contenttop').animate({
        height: 'toggle',
        opacity: 'toggle'
    });
});