JSFiddle - React, Tailwind, and code Playground

by adiakritos

HTML

<span class="link">Show</span>

<div class="parent" style="display:none;" tabindex="0">
    <p>I'm the parent</p>
    
    <div class="first-child" tabindex="0">
        <p>I'm the first child</p>
        
        <div class="childs-child" tabindex="0">
            <p>I'm the child's child</p>
        </div>
        
    </div>
    
</div>

CSS

.parent {
    background-color:red;
    width:300px;
}
.first-child {
    background-color:blue;
    width:200px;
}
.childs-child {
    background-color:green;
    width:100px;
}

JavaScript

var test = function(){
    
    var link   = $('.link'),
        parent = $('.parent');
    
    link.click(function() {
        parent.show().focus();
        link.hide();
    });
    
    parent.focusout(function() {
         link.show();
    }); 
    
}();