Simple tabs element with pure js and animation effect example

Simple tabs element with pure js and animation effect example

by 25058214

HTML

<div class="tabs v1">
            <div class="">
                <p class="t-btn active" data-name="profile">Profile</p>
                <p class="t-btn" data-name="messages">Messages </p>
                <p class="t-btn" data-name="settings"> Settings</p>
            </div>
            <div class="t-panel-container">
                <div class="t-panel profile active">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque pariatur odit, optio exercitationem vitae accusamus at aliquam quas laudantium similique excepturi rem ullam eaque tempora cupiditate suscipit porro natus quod alias iste saepe est nihil explicabo libero! Id optio unde recusandae, error doloremque minus ducimus eveniet, repellat, atque quaerat porro.</p>
                </div>
                <div class="t-panel messages">
                    <h3>Lorem ipsum dolor sit amet.</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia temporibus vitae minima modi, quaerat provident impedit voluptates, rem earum maxime dicta placeat tempore veritatis animi beatae optio ad, veniam ducimus.</p>
                </div>
                <div class="t-panel settings">
                    <h3>Lorem ipsum dolor sit amet.</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia temporibus vitae minima modi, quaerat provident impedit voluptates, rem earum maxime dicta placeat tempore veritatis animi beatae optio ad, veniam ducimus.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia veniam voluptas mollitia quisquam corporis pariatur aliquid accusamus minima distinctio debitis! Explicabo aut veritatis est minima quidem sapiente reiciendis rerum accusamus.</p>
                </div>
            </div>
        </div>

SCSS

body{
    margin: 0;
    padding: 0;
    background: #FFC371;
    background: linear-gradient(to right, #FF5F6D, #FFC371);
    font-family: 'Quicksand', sans-serif;
    color: #262626;
}
*{
    box-sizing: border-box;
}
.logo {
    position: relative;
    display: flex;
    margin: 10px;
    flex-direction: row;
    z-index: 1000;
    
    a {
        display: block;
        height: 30px;
        width: auto;
        cursor: pointer;
        margin-right: 10px;
        img {
            height: 100%;
            width: auto;
        }
    }
  }

.container{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 10px 100px 10px;
    h1{
        text-align: center;
        margin-bottom: 30px;
        font-weight: 500;
    }
    h2{
        font-weight: 500;
    }
}

.tabs.v1{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 300px; //only for demo porpuses
    .t-btn-container{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 60px;
        align-items: center;
        background-color: #262626;
        border-radius: 5px;
        padding: 0 20px;
        box-shadow: 0 20px 25px -5px rgba(0,0,0,.15),0 10px 10px -5px rgba(0,0,0,.1)!important;
        position: s;
        .t-btn{
            padding: 5px 10px;
            margin-right: 10px;
            color: #bdbdbd;
            font-weight: 400;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            padding-left: 10px;
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            &.active{
                color: #fff;
            }
        }
    }
    .t-panel-container{
        padding: 20px;
        .t-panel{
            color: #262626;
            transition: all 0.2s ease-in-out;
            opacity: 0;
           ...

JavaScript

function initTab(elem){
    document.addEventListener('click', function (e) {
        if (!e.target.matches(elem+' .t-btn')) return;
        else{
            if(!e.target.classList.contains('active')){
                findActiveElementAndRemoveIt(elem+' .t-btn');
                findActiveElementAndRemoveIt(elem+' .t-panel');
                e.target.classList.add('active');  
                setTimeout(function(){                 
                    var panel = document.querySelectorAll(elem+' .t-panel.'+e.target.dataset.name);
                    Array.prototype.forEach.call(panel, function (el) {
                        el.classList.add('active');
                    });
                }, 200);
            }
        }
    });
}

function findActiveElementAndRemoveIt(elem){
    var elementList = document.querySelectorAll(elem);
    Array.prototype.forEach.call(elementList, function (e) {
        e.classList.remove('active');
    });
}

initTab('.tabs.v1');
initTab('.tabs.v2');