JSFiddle - React, Tailwind, and code Playground

by willemvb

HTML

<body>
    
    <div id="box"></div>
    
    
    <button type="button" id="myButton">Toggle Box</button>
    
    <p>Something else</p>
    
</body>

CSS

#box {
width: 400px;
height: 400px;
top: 20px;
left: 50px;  
    background-color: blue;
}

JavaScript

$(document).ready(function() {
    $('#box').hide();
    $('#box').addClass('closed');  
});

$('#myButton').click(function () {
    
    
    
    if ($('#box').hasClass('closed')) {
        
        $('#box').show();
        $('#box').removeClass('closed').addClass('open');    
        $('body :not(#box)').css({opacity : 0.1});
        
    }
    else {
            $('#box').hide();
            $('#box').removeClass('open').addClass('closed');  
        $('body :not(#box)').css({opacity : 1});
    }
});