JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <input type="checkbox" />
</div>
    
<div id="slider"></div>

CSS

#box {
        width:100px;
        height:100px;
        background-color:green;
    }
    
    #slider {
        width:100px;
        height:100px;
        background-color:purple;
        display:none;
    }

JavaScript

$(document).ready(function(){
        $('#box:not(:checkbox)').bind('click', function(){
        if ($(this).next('#slider').is(":hidden")) {
            $(this).next('#slider').slideDown('normal');
        } else {
            $(this).next('#slider').slideUp('normal');
        }
        });
    });