Tabs Simple Javascript animated tabs

index.html

<h1 class="title">FanTabulous</h1>
<div class="codepen-container">
<div id="icetab-container">
    	<div class="icetab current-tab">Tab1</div><div class="icetab">Tab2</div><div class="icetab">Tab3</div>       
    </div>
    
    <div id="icetab-content">
    	<div class="tabcontent tab-active">Tab1 <br>1 lorim ipsum</div> 
        <div class="tabcontent">Tab2 <br>2 lorim ipsum</div>
         <div class="tabcontent">Tab3 <br>23 lorim ipsum</div>
    </div> 

script.js

var tabs = document.getElementById('icetab-container').children;
var tabcontents = document.getElementById('icetab-content').children;

var myFunction = function() {
	var tabchange = this.mynum;
	for(var int=0;int<tabcontents.length;int++){
		tabcontents[int].className = ' tabcontent';
		tabs[int].className = ' icetab';
	}
	tabcontents[tabchange].classList.add('tab-active');
	this.classList.add('current-tab');
}	


for(var index=0;index<tabs.length;index++){
	tabs[index].mynum=index;
	tabs[index].addEventListener('click', myFunction, false);
}

style.css

div {
	box-sizing: border-box;
	transition: all ease-in-out .5s;
	-moz-transition: all ease-in-out .5s;
	-webkit-transition: all ease-in-out .5s;
}
.icetab {
	border: 2px solid #ff9900;
	display: inline-block; 
	border-bottom: 0px;	
	margin: 0px;	
  color: #fff;
	cursor: pointer;
	border-right: 0px;
}
.icetab:last-child {
	border-right: 2px solid #ff9900;	
}

#icetab-content {
	overflow: hidden;
	position: relative;
	border-top: 2px solid #ff9900;
}


.tabcontent {
	position: absolute;
	left: 0px;
	top: 0px;
	background: #fff;
	width: 100%;
	border-top: 0px;
	border: 2px solid #ff9900;
	border-top: 0px;
	transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
}

.tabcontent:first-child {
	position: relative;	
}
.tabcontent.tab-active {
	border-top: 0px;
	display: block;
	transform: translateY(0%);
	-moz-transform: translateY(0%);
	-webkit-transform: translateY(0%);
}


/* A tiny wee bit of visual formating */
body {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;	
	background: #666;
	color: #454545;
}
.codepen-container {
  max-width: 700px;
  margin: 40px;
  margin-left: auto;
  margin-right: auto;
}
.title {
  color: #ff9900;
  text-align: center;
  letter-spacing: 14px;
  text-transform: uppercase;
  font-size: 17px;
  margin: 40px 0px;
}
.tabcontent {
	padding: 40px;
}
.icetab {
	padding: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.current-tab { 
	background: #ff9900;
}

Tabs Simple Javascript animated tabs.markdown

Tabs Simple Javascript animated tabs