Tabs from AXIT

by Megi93

HTML

<div class="tabbable tabs-left">
    <ul class="col-xs-12 col-sm-2 nav nav-tabs nav-tabs1">
        <li data-id="tab1" class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li>
        <li data-id="tab2"><a data-toggle="tab" href="#tab2">TAB 2</a></li>
        <li data-id="tab3"><a data-toggle="tab" href="#tab3">TAB 3</a></li>
    </ul>
    <div class="col-xs-12 col-sm-6 tab-content">
        <div id="tab1" class="tab-pane fade in active">
            <h3>Tabs with soft transitioning effect.</h3>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient
                montes.</p>
            <a href="#" role="button" class="btn btn-default btnDownloadTab">Download</a>
        </div>
        <div id="tab2" class="tab-pane fade">
            <h3>Tabs with soft transitioning effect.</h3>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes. Dolores est, culpa natus earum facere magni expedita nostrum hic sint quisquam  consectetur consequatur molestiae quod omnis voluptatibus soluta. Eos odit praesentium omnis. </p>
            <a href="#" role="button" class="btn btn-default btnDownloadTab">Download</a>
        </div>
        <div id="tab3" class="tab-pane fade">
            <h3>Tabs with soft transitioning effect.</h3>
            <p>Excepturi dignissimos id quo repellendus commodi similique blanditiis incidunt libero nihil temporibus quia cupiditate nulla architecto sint soluta, doloremque. Ratione beatae illum quis repudiandae quasi, esse sit omnis quaerat
                dolorem nam natus officia quidem neque, eligendi delectus!</p>
            <a href="#" role="button" class="btn btn-default btnDownloadTab">Download</a>
        </div>
    </div>
</div>

CSS

#tabs {
    background-color: #f5f5f5;
    padding-top: 5%;
    padding-bottom: 5%;
}

.nav-tabs {
    color: #fff;
    /*    background-color: #1a1a1a;*/
    /*    padding-right: 0px;*/
}

.nav-tabs1 li {
    width: 112px;
    height: 112px;
}

.tab-content {
    padding-left: 0px;
    padding-right: 0px;
}

.tabs-left {
    padding-left: 15px;
    padding-right: 15px;
}

.tabs-left > .nav-tabs {
    border-bottom: 0;
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

.tabs-left > .nav-tabs > li {
    float: none;
}

.tabs-left > .nav-tabs > li > a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
    float: left;
    margin-right: 40px;
}

.tabs-left > .nav-tabs > li > a {
    padding: 45px 12px;
    color: #fff;
    background-color: #333333;
    border: none;
    font-weight: bold;
    border-radius: 0px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
    border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
    border: none;
    color: #fff;
    background-color: #ff8b38;
}

#tab1 h3,
#tab2 h3,
#tab3 h3 {
    margin-top: 0;
    margin-bottom: 0.9%;
}

#tab1 p,
#tab2 p,
#tab3 p {
    color: #86878b;
    padding-bottom: 4.5%;
}

.btnDownloadTab {
    border: none;
    background-color: #ff8b38;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    margin-top: 5%;
}

a.btn.btn-default.btnDownloadTab:hover,
a.btn.btn-default.btnDownloadTab:focus {
    background: #ff8b38;
    color: #fff;
}

.build1 {
    float: right;
}

JavaScript

var nav = document.querySelector(".nav").querySelectorAll("li");
var contents = document.querySelector(".tab-content").querySelectorAll(".tab-pane");
var activeContent = document.querySelector(".tab-content").querySelector(".tab-pane.active");

for(var i = 0; i < nav.length; i++) {
	nav[i].onclick = function() {
		if(document.querySelector(".nav").querySelector("li.active")) {
			document.querySelector(".nav").querySelector("li.active").classList.remove("active");
			activeContent.classList.remove("active");
		}
		this.classList.add("active");
		activeContent.classList.add("active");
		tabAttribute(this.getAttribute('data-id'));
	}
}

function tabAttribute(element) {
	for(var i = 0; i < contents.length; i++) {
		contents[i].classList.remove("active");
	}
	document.querySelector("#" + element).classList.add("active");
}