JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

aaa<ul class="jtabs">
<li class="selected">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div>
    <div>a<br/>a<br/>a</div>
    <div>b<br/>b<br/>b<br/>b<br/>b</div>
    <div>c</div>
</div>zzz

aaa<ul class="jtabs">
    <li class="selected">111</li>
    <li>222</li>
    <li>333</li>
</ul>

<p>hello</p>

<ul id="data2">
    <li>aaa</li>
    <li>bbb<br/>bbb<br/>bbb</li>
    <li>ccc<br/>ccc</li>
</ul>
zzz

CSS

ul, li { list-style:none; }
.jtabs { background:yellow; }
.jtabs > * { cursor:pointer; }
.jtabs > *.selected { color:green }

/* container des tabs data */
.jtabs + * { background:blue; }

/* tabs data */
.jtabs + * > * { background:red; }

JavaScript

(function($){
    $.fn.jtabs = function(opts){
        var opt = $.extend({ showTime:500, hideTime:500, data:false, minHeight:20 }, opts);
        
        return this.each(function() {
            var $t = $(this);
            var $tabs = $t.children();
            var $selected = $tabs.filter('.selected');
            if($selected.length === 0) $selected = $tabs.first().addClass('selected');
            var $data;
            if(opt.data === false) $data = $t.next(); else $data = $(opt.data);
            var $datachild = $data.children();
            var index = $selected.index();
            var $selectedData = $datachild.eq(index).addClass('selected');
            $data.css("position","relative").height(Math.max($selectedData.height(),opt.minHeight));
            $datachild.css({position:'absolute',top:0,left:0}).not($selectedData).hide();
            var locked = false;
            var animStep; function step(){ if(--animStep === 0) locked=false; };
            
            $tabs.click(function(){
                    var $tt = $(this); if(locked || $selected.is($tt)) return ; locked = true;
                    animStep = 3;
                    $selected.removeClass('selected');
                    $selectedData.fadeOut(opt.hideTime,step);
                    $selected = $tt.addClass('selected');
                    index = $selected.index();
                    $selectedData = $datachild.eq(index).fadeIn(opt.showTime,step).addClass("selected");
                $data.animate({height:Math.max($selectedData.height(),opt.minHeight)},opt.showTime,step);
            });
        });
    }
})(jQuery);

var $tabs = $('ul.jtabs');

$tabs.eq(0).jtabs({showTime:666,hideTime:444,minHeight:60});
$tabs.eq(1).jtabs({showTime:250,hideTime:250,data:"#data2"});