JSFiddle - React, Tailwind, and code Playground

by helisz

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>  
<div class="out"></div>
<div class="out"></div>
<div class="out"></div>

CSS

.out{
    border: #FF0000 1px solid;
    width:100px;
    height:50px;
}

.in{    
    background: #00FF00;
    width:40px;
    height:40px;   
}
.extra{
    border: #0000FF 1px solid;
    width:100px;
    height:50px; 
}
.extra_b{
    background: #FFF;
    width:40px;
    height:40px;      
}

JavaScript

var outer = document.getElementsByClassName("out");
    for(var i = 0 ;i<outer.length;i++){ 
        var inner = document.createElement("div");
        inner.className="in";
        outer[i].appendChild(inner);
        
        inner.onclick=function(){ add(outer[i]) };

}
$(document).ready(function() {
    $(".in").hide();
    $('.out').hover(function() {
        $(this).find(".in").slideToggle(100);
    });
});


function add(objectIn){
    var obj=objectIn;
    var ex = document.createElement("div");
    ex.className = "extra";
    
    var exb = document.createElement("div");
    exb.className = "extra_b";
    
    ex.appendChild(exb);
    obj.appendChild(ex);  
    
    obj.style.display="none";
    
    exb.onclick=function(e){  obj.style.display="block"; ex.parentNode.removeChild(ex); };
  
}