JSFiddle - React, Tailwind, and code Playground

by Keith Chu

HTML

<div>
<header>
    <a href="#" id="trigger">Hi</a>
</header>
<section id="target">
    <p>Hello world.</p>
</section>
<section id="body">
    <p>Testing 1, 2, 3</p>
    <ul>
        <li>alpha</li>
        <li>beta</li>
    </ul>
</section>
</div>

CSS

div {
     position: relative;   
}
header { 
    background: #000;
    padding: 20px 30px; 
    position: relative;
    text-align: right;
    z-index: 2;
}

#trigger {
    background: #999;
    border: none;
    color: #fff;
    font-family: sans-serif;
    font-size: 1.2em;
    padding: 6px;
    position: relative;
    text-decoration: none;
    z-index: 2;
}
#target { 
    background: rgba(31,31,31,.95);
    color: #fff;
    height: 200px;
    position: absolute; top: -200px;
    text-align: center;
    visibility: hidden;
    width: 100%;
    z-index: 1;
    
    -webkit-transform: translateZ(0);
    -webkit-transition: all .5s linear;
       -moz-transition: all .5s linear;
            transition: all .5s linear;
}
#target.open {
    top: 60px;
    visibility: visible;   
}
#target p { line-height: 200px; }
#body { 
    background: #f3f3f3;
    height: 600px; 
    padding: 24px 18px 0;
    position: relative; 
    z-index: 0;  
}

JavaScript

function showTarget() {
   var t = document.getElementById("target");
   if (/open/.test(t.className)) {
       t.className = ""; 
   }
   else {
       t.className += " open";
   }
}

function bindEvent(el, eventName, eventHandler) {
    if (el.addEventListener) { el.addEventListener(eventName, eventHandler, false); }
    else if (el.attachEvent) { el.attachEvent("on" + eventName, eventHandler); }
    else { return; }
}
    
var b = document.getElementById("trigger");
bindEvent(b, "click", function() { showTarget(); });