JSFiddle - React, Tailwind, and code Playground

by Jonathan_Ironman

HTML

<div>
    <div class="Menu">Menu Title</div>
    <div class="container">
        <div>Google</div>
        <div>Yahoo</div>
        <div>Bing</div>
        <div>Ask.com</div>
    </div>
</div>

CSS

body {
    font-family: Arial
}
.container {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s;
    -webkit-transition: all 0.6s;
}
.container div {
    font-size: 13px;
    padding: 5px;
}
.ShowSubMenu {
    background: #f00;
    max-height: 200px; /* Something bigger than menu */
    height: initial;
}

JavaScript

$(function () {
    $('.Menu').on('click', function () {
        if ($('.container').hasClass('ShowSubMenu')) $('.container').removeClass('ShowSubMenu');
        else $('.container').addClass('ShowSubMenu');
    });
});