JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<div class="arrowCont">
    <i></i>
</div>
<div class="drawer">
    <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
</div>

CSS

body {
    font-size: 13px;
    font-family: sans-serif;
    font-weight: 100;
    color: #222;
}
    div.arrowCont {
        width: 28px;
        height: 28px;
        margin: 20px auto;
        overflow: hidden;
        -webkit-transform-origin: 50%;
        -webkit-transition: -webkit-transform .3s ease-out;
    }
        .open div.arrowCont {
            -webkit-transform: rotate3d(1,0,0,180deg);
        }
        i {
            display: block;
            width: 19px;
            height: 19px;
            margin: 10px auto 0;
            border-top: 1px solid #222;
            border-right: 1px solid #222;
            -webkit-transform: rotate(-45deg);
        }
    div.drawer {
        max-width: 220px;
        max-height: 0px;
        margin: 0 auto;
        overflow: hidden;
        border-top: 1px solid #ccc;
        -webkit-transition: max-height .3s ease-out;
    }
        .open div.drawer {
            max-height: 400px;
        }
        div.drawer p {
            border-bottom: 1px solid #ccc;
            padding: 0 1em 1em;
        }
.center {
    text-align: center;
}

JavaScript

function openIt(){
    
    $('body').toggleClass('open');
}

$(document).keydown(function(event){
    
    if (event.which == 79) {
        
        openIt();
    }
});

$('i').click(function(){
    
    openIt();
});