JSFiddle - React, Tailwind, and code Playground

HTML

<section id="content" class="clickable">
    <div id="copy">
        <h1>CONTENT SECTION</h1>
    </div>
</section>
        
<section id="toggleHolder">    
    <div id="toggleButton" class="clickable">                                                                   
        HIDE  
    </div>                                
</section>

<footer id="footer">
    <div id="footerContainer">            
        FOOTER
    </div>
</footer>

CSS

#content, #footer {
    border: 1px solid #000;
    padding: 10px;
}
#toggleButton {
    border: 1px solid #000;
    width: 50px;
    padding: 10px;
    margin: 10px 0;
    cursor: pointer;
}

JavaScript

$(document).ready(function() {
    $('#toggleButton').click(function() {
        $this = $(this);
        $('#content').animate({
             height: 'toggle'
             }, 500
        ); 
                
        $('#footer').animate({
            height: 'toggle'
            }, 500, function() {
                $this.text(function() {
                    return $('#content').is(":visible") ? 'HIDE' : 'SHOW';
                });
            }
        );        
    });                                
});