JSFiddle - React, Tailwind, and code Playground

by steffenbew

HTML

<ul id="coltab">
    <li>Item 1<br/>(click me)
        <ul>
            <li>This first item needs to toggle up</li>
        </ul>
    </li>
    <li>Item 2<br/>(click me)
        <ul>
            <li>This second item needs to toggle up</li>
        </ul>
    </li>
</ul>

CSS

body { margin: 100px 50px; }

#coltab { position: relative; text-align: center; }

#coltab > li { 
    background: #ccc; 
    color: #444; 
    cursor: pointer; 
    display: block; 
    float: left; 
    margin: 0 10px; 
    padding: 10px 20px; 
    position: relative;
    width: 100px; 
}

#coltab ul { 
    background: #eee; 
    color: #222; 
    display: none; 
    padding: 5px; 
    position: absolute; 
    left: 0; 
    right; 0; 
    top: 0; 
    z-index: -1; 
}

#coltab ul.open { display: block; }

JavaScript

$("#coltab li ul").each(function (index) {
  $(this).data('height', $(this).outerHeight());    
});

$("#coltab li").click(function () {

    $("#coltab li ul.open").animate({"top": 0}, function () {
        $(this).removeClass('open');  
    });

    var itemHeight = $(this).children('ul').data('height');
    $(this).find('ul:not(.open)').animate({"top": -itemHeight}).addClass('open');

});