JSFiddle - React, Tailwind, and code Playground

HTML

<div class="max">
    <ul class="menu">Pequena
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    <ul class="menu">Pequena
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    <ul class="menu">Grande
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten!</li>
    </ul>
</div>

CSS

.max ul {
    border:2px solid #a5f;
    overflow:hidden;
    
}
li{
    height:0px;
    transition: all 1s ease-in-out;
}

.max ul.opened li {
   height: 20px !important;
}

div {
    width:200px;
    float:left;
    padding:10px;
}

JavaScript

var ulMax = $$('.max ul');
ulMax.addEvent('click', function () {
    ulMax.removeClass('opened');
    this.addClass('opened');
});