JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<a href="#" onclick="toggle('#account-vipad-1');" class="most_ranked_link">Most ranked</a>
			<a href="#" onclick="toggle('#account-vipad-2');" class="today_filter_link">Today</a>
                
            <div style="display: none" id="account-vipad-1">
                <a href="#">Most ranked</a>
                <a href="#">Most ranked-2</a>
                <a href="#">Most ranked-3</a>
            </div>
            
            <div id="account-vipad-2">
                <a href="#">Today</a>
                <a href="#">Last week</a>
                <a href="#">Last month</a>
                <a href="#">Last six month</a>
                <a href="#">Last year</a>
            </div>

CSS

#account-vipad-1, #account-vipad-2 {
    display: block;
    width: 95px;
}

JavaScript

$(function() {
    $("div[id*='account-vipad-']").hide();    
})();


function toggle(objName) {
    var obj = $(objName),
        blocks = $("div[id*='account-vipad-']");
    
    if (obj.css("display") != "none") {
        obj.animate({ height: 'hide' }, 100);
    } else {
        var visibleBlocks = $("div[id*='account-vipad-']:visible");

        if (visibleBlocks.length < 1) {
            obj.animate({ height: 'show' }, 100);
        } else {
            $(visibleBlocks).animate({ height: 'hide' }, 100, function() {
                obj.animate({ height: 'show' }, 100);
            });            
        }
        
    }

}