JSFiddle - React, Tailwind, and code Playground

by Christian Gambardella

HTML

<button class="toggle-message" type="button">show/hide message</button>
<button class="toggle-slider" type="button">slide slider</button>

<div id="message">
    <div id="slider"></div>
</div>

CSS

#message {
    position: relative;
    margin-top: 20px;
    background-color: #f00;
    
    padding-top: 10px;
}


#slider {
    position: relative;
    
    height:100px;
    background-color: #0f0;
}

JavaScript

$(".toggle-message").click(function() {
    $("#message").toggle();
    $("#slider").toggle();
});

$(".toggle-slider").click(function() {
    console.log( $("#slider").parents().is(":hidden") );
    
    if ( $("#slider").parents().is(":hidden") ) {
        $("#slider").toggle();
    } else {
        $("#slider").slideToggle();
    }
    
});