JSFiddle - React, Tailwind, and code Playground
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 {
height: 0;
overflow: hidden;
transition: all 0.3s;
-webkit-transition: all 0.6s;
}
.container div {
font-size: 13px;
padding: 5px;
}
.ShowSubMenu {
height: initial !important;
}
JavaScript
$(function() {
$('.Menu').on('click',function() {
if ($('.container').hasClass('ShowSubMenu'))
$('.container').removeClass('ShowSubMenu');
else
$('.container').addClass('ShowSubMenu');
});
});