JSFiddle - React, Tailwind, and code Playground

by Dylan Schadeck

HTML

<div class="openMenu">Open menu <div class="menu">stuff in the menu</div></div>
<div class="openMenu">Open menu <div class="menu">stuff in this other menu</div></div>

CSS

div.openMenu {
    float: left;
    background: #eee;
    padding: 5px 10px;
    width: 200px;
}

div.openMenu div.menu {
    background: #0F0;
    height: 0px;
    overflow:hidden;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

div.openMenu div.menu.active  {
    height: 300px;
}

JavaScript

$('div.openMenu').click(function() {
    $('div.menu', this).toggleClass('active');
});