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">Pequena
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

CSS

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

.max ul.opened {
   max-height: 80px;
}

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

JavaScript

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