JSFiddle - React, Tailwind, and code Playground

HTML

<button>BUTTON</button>
<div class="nav pseudo"></div>

CSS

button {
    display: block;
}

.nav {
    padding: 5px;
    border: 1px solid black;
    display: inline-block;
}

.active:before {
    content: "x";
}

.pseudo:before {
    content: "=";
}

JavaScript

$('button').click(function() {
	
    $('.nav').slideUp(function() {
        var nav = $(this);
        if(nav.hasClass('pseudo')) {
            nav.removeClass('pseudo');
            nav.addClass('active');
        } else {
            nav.removeClass('active');
            nav.addClass('pseudo');
        }
    }).slideDown();

});