JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<button id="button1">Show</button>
<div>Lorem ipsum</div>

CSS

button { margin: 20px 20px 0px 20px; }

div {
    width: 200px;
    height: 100px;
    background: #e1e1e1;
    padding: 10px;
    margin: 20px;
    display: none;
}

JavaScript

$(document).ready(function() {
    
    $('#button1').on("click", function() {
        
        var obj = $(this),
            objN = obj.next('div');
    
        obj.toggleClass('show');        
        
        if ( obj.hasClass('show') ) {
            
            objN.stop().animate({ 
                opacity: 'toggle',
                height: 'toggle' 
            }, 600);
            
            obj.text('Hide');
            
        }
        else {
            
            objN.stop().animate({ 
                opacity: 'toggle',
                height: 'toggle' 
            }, 600);
            
            obj.text('Show');
            
        }
    });
    
});