JSFiddle - React, Tailwind, and code Playground

by ajo4you

HTML

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<div id="status">Showing!</div>
<div id="parent1" class="parent">
    <h1>Parent 1</h1>
    <button class="hideBtn">Hide</button>
    <button class="showBtn">Show</button>
</div>
<div id="parent2" class="parent">
    <h1>Parent 2</h1>
    <button class="hideBtn">Hide</button>
    <button class="showBtn">Show</button>
    <div id="elem" class="elem">Hide me!</div>
</div>

<button class="switch" id="show1">Show parent1</button>
<button class="switch" id="show2">Show parent2</button>

CSS

body {
    margin: 20px;
}
h1 {
    height: 30px;
    padding: 5px;
    line-height: 30px;
    font-weight: bold;
}
.parent {
    width: 200px;
    height: 200px;
    background: #eee;
    position: relative;
}
.elem {
    background: red;
    height: 50px; width: 100%;
    position: absolute;
    top: 50%;
    color: #fff;
    text-align: center;
}
#parent1 {
    display: none;
}

JavaScript

$(function() {
    
    var isHidden = false;
    
    $('button.switch').click(function() {
        
        if(this.id === 'show1') {
            $('#parent1').show();
            $('#parent2').hide();
        } else if(this.id === 'show2') {
            $('#parent2').show();
            if(isHidden){
                 $('#elem').hide();
            }
            $('#parent1').hide();
        }    
    });
    
    $('.hideBtn').click(function() {
        $('#elem').hide('drop', { direction: "up", distance: 15, easing: 'linear' }, 200, function() {
            $('#status').text('Hidden!');
            isHidden = true;
            // line below is what does the job
            // this.style.display = 'none';
        });
    });
    $('.showBtn').click(function() {
        $('#elem').show('drop', { direction: "up", distance: 15, easing: 'linear' }, 200, function() {
            $('#status').text('Showing!');
            isHidden = false;
        });
    });
    
});