JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="_tabs">
    <div class="_tab">
        <a href="#test" class="_tab_toggler">this</a>
        <div id="test" class="_tab_content">asdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasf</div>
    </div>
     <div class="_tab">
        <a href="#test2" class="_tab_toggler">this</a>
        <div id="test2" class="_tab_content">asdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasf</div>
    </div>
     <div class="_tab">
        <a href="#test3" class="_tab_toggler __active">this</a>
        <div id="test3" class="_tab_content __active" style="height: auto; display: block;">asdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasf</div>
    </div>
</div>

<br/>

<div class="_tabs __horisontal">
    <div class="_togglers_bar">
        <a href="#test4" class="_tab_toggler">this</a>
        <a href="#test5" class="_tab_toggler">this</a>
        <a href="#test6" class="_tab_toggler __active">this</a>        
    </div>
    <div>
        <div id="test4" class="_tab_content ">asdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasfasdasfasfasf</div>
        <div id="test5" class="_tab_content...

CSS

._tab_content{
    height: 0;
    opacity: 0;
    display: none;
    overflow: hidden;
    -webkit-transition: 0.5s ease;
    word-break: break-all;
}

._tab_content.__active{
    opacity: 1;
}

._tab_toggler.__active{
    color: red;
}

JavaScript

function AddClass(Elem, ClassName){
    var reg = new RegExp(ClassName, 'g');
    
    if(!reg.test(Elem.className)){
        Elem.className += ' ' + ClassName;
    } else {
        return false;
    }
}


var tabWraps = document.querySelectorAll('._tabs');

for(var i=0;i<tabWraps.length;i++){
     var togglers = tabWraps[i].querySelectorAll('._tab_toggler');
    
        for(var tit=0;tit<togglers.length;tit++){
            togglers[tit].onclick = function(e){
                e.preventDefault();
                
                var ID = this.attributes.href.value.replace('#','');
                    wrapper = this.parentElement.parentElement,
                    activeToggler = wrapper.querySelectorAll('._tab_toggler.__active'),
                    activeContent = wrapper.querySelectorAll('._tab_content.__active'),
                    content = document.getElementById(ID);
                
                for(var tiit=0;tiit<activeToggler.length;tiit++){
                    activeToggler[tiit].className = activeToggler[tiit].className.replace(' __active', '');
                    activeContent[tiit].className = activeContent[tiit].className.replace(' __active', '');
                    activeContent[tiit].style.height = 0;
                }
                
                AddClass(this, '__active');
                content.style.display = 'block';
                content.style.height = content.scrollHeight + 'px';
                
                setTimeout(function(){                    
                    AddClass(content, '__active');
                }, 10);
            }
        }
        
    
}