JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<script>
function toggle_visibility(a) {
    var b = document.getElementById(a);
    if (b.style.display == "block") {
        b.style.display = "none";
        $.cookie("disp" + a, "none")
    } else {
        b.style.display = "block";
        $.cookie("disp" + a, "block")
    }
}

</script>

<div id="container"  class="draggable">
<div id="overlay" style="display:none" class="draggable">
    <a href="#" class="link" onclick="toggle_visibility('container');">hide</a>
</div>
<div id="widget-content">
Stuff
<textarea></textarea>
</div>
</div>



<a style="margin-top:300px;position:absolute;" id="togglecontrol">(Show/Hide)</a>

CSS

#container{
width:200px;
height:200px;
position: absolute;
display: block;
margin-top:20px;
}
#widget-content{
width:200px;
height:200px;
background-color:pink;
position: absolute;
z-index:1;
}
#overlay{
width:200px;
height:200px;
background-color:blue;
position: absolute;
z-index:2;
opacity: 0.5;
}
.link{
position: absolute;
margin-top:-20px;
}

JavaScript

$(document).ready(function() {
    $('#togglecontrol').click(function() {
        $('#overlay').toggle();
    });
});