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: 100px;*/
}

JavaScript

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

function findHeight(){
    var sumHeight = 0;
     $('.container').children().each(
         function(){
             sumHeight += $(this).outerHeight();
         });
    return sumHeight;
}