JSFiddle - React, Tailwind, and code Playground

by MashedPotatoes

HTML

<div id="show">
    <a href="#show" id="openclose">Open</a>
    <div id="content">
        <br>some text...
        <br> Mur text, duh...
        <br> Lorem
        <br> Ipsum
        <br> Watchama sayin'?
        <br> Have fun!
    </div>
</div>
        
<!-- Of course, strive for better ideas! -->

CSS

#content {
    transition: opacity 1s ease-in, height 500ms ease-out;
    opacity: 1;
    height: 200px;
    width: 200px;
    background: gray;
}

JavaScript

var open = true;

$('#openclose').click(function() {
    if (!open) {
        open = true;
        $(this).text('Close');
        $('#content').css({
            opacity: 1,
            height: '200px',
            overflow: 'hidden',
        });
        $('#content').one('transitionend', function() {
            $(this).css('overflow', 'auto');
        });
    } else {
        open = false;
        $(this).text('Open');
        $('#content').css({
            opacity: 0,
            height: '0px',
            overflow: 'hidden',
        });
        $('#content').one('transitionend', function() {
            $(this).css('overflow', 'auto');
        });
    }
});