JSFiddle - React, Tailwind, and code Playground

HTML

<span class="button">Click me</span>

<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div>

CSS

body {
    font-family: sans-serif;
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.button {
    display: block;
    padding: 5%;
    background: rgba(176, 23, 31, 0.6);
    border-radius: 10px;
    text-transform: uppercase;
    border: 2px solid rgba(176, 23, 31, 1);
    max-width: 300px;
    margin: 0 auto;
    cursor: pointer;
}
.button.slide_in {
    background: rgba(205, 198, 115, 0.6);
    border-color: rgba(205, 198, 115, 1);
}
#testbox {
    max-width: 300px;
    margin: 0 auto;
    margin-top: 30px;
    min-height: 200px;
    padding: 5%;
    background: rgba(255, 114, 86, 0.2);
    border: 2px solid rgba(255, 114, 86, 1);
    color: rgba(176, 23, 31, 1);
    display: none;
}

JavaScript

$('.button').on('click', function () {
    var $testbox = $('#testbox');
    
    if ($testbox.is(':visible')) {
        console.log('Click 1');
    } else {
        console.log('Click 2');
    }
    
    $(this).toggleClass('slide_in');
    $testbox.slideToggle();
});