Tab View with Pure Javascript

Tab View with Pure Javascript

by Adi Jaya

HTML

<div class="container-tabclick">
<ul class="ul-container-tabclick">
<li class="click-tab pointer" onclick="tabviewsatu()">Tab 1</li>
<li class="click-tab pointer" onclick="tabviewdua()">Tab 2</li>
<li class="click-tab pointer" onclick="tabviewtiga()">Tab 3</li>
</ul>
</div>
<div class="clear"></div>

<!-- area content tab view open -->
<div class="container-tabview">
  <div id="tabviewsatu">tab1_ganti teks ini</div>
  <div class="hide" id="tabviewdua">tab2_ganti teks ini</div>  
  <div class="hide" id="tabviewtiga">
  <strong>Lorem Ipsum</strong> is <mark>simply dummy text</mark> of the printing and typesetting industry. 
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
  when an unknown printer took a galley of type and scrambled it to make a type 
  specimen book. It has survived not only five centuries, but also the leap into
  electronic typesetting, remaining essentially unchanged. 
  It was popularised in the 1960s with the release of Letraset 
  sheets containing Lorem Ipsum passages, and more recently with
  desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  </div>  
</div>  
<!-- area content tab view close --> 
  
 <!-- pure javascript --> 
<script>
function tabviewsatu() {
	document.getElementById("tabviewsatu").style.display = "block";
	document.getElementById("tabviewdua").style.display = "none";
	document.getElementById("tabviewtiga").style.display = "none";  
}
function tabviewdua() {
	document.getElementById("tabviewsatu").style.display = "none";
	document.getElementById("tabviewdua").style.display = "block";
	document.getElementById("tabviewtiga").style.display = "none";  
}
function tabviewtiga() {
	document.getElementById("tabviewsatu").style.display = "none";
	document.getElementById("tabviewdua").style.display = "none";
	document.getElementById("tabviewtiga").style.display = "block";  
}
</script>

CSS

.pointer{
  cursor:pointer;
}
.pointer:active{
  position:relative;
  top:2px;
}
.pointer:hover{
  border-bottom:1px solid;
}
.hide{
  display:none;
}
.click-tab{
  font-family:arial;
  font-weight:bold;
  color:white;
}
.clear{clear:both;}
.clear:after{
  visibility:hidden;
  display:block;
  font-size:0;
  content:"";
  clear:both;
  height:0;
}
.container-tabclick {
    background: #3d3e3e;
    height: 35px;
    padding: 0 6px;
    margin-bottom: 10px;
}
.ul-container-tabclick {
    list-style-type: none;
    padding: 7px 5px;
}
.ul-container-tabclick li {
    float: left;
    min-width: 65px;
    border-bottom: 2px solid white;
    margin-right: 10px;
    text-align: center;
}
.ul-container-tabclick li:hover {
    border-bottom: 2px solid #3170fd;
}
.container-tabview {
    margin-left: 10px;
}
/*responsive area 350px, change 350px with your size */
@media screen and (max-width:350px){ 
  .container-tabclick{
    height: auto;    
  }
li.click-tab{
    float: none;
    text-align: center;/*left or right*/
    padding: 5px 0;
  }
}

JavaScript

// click Run button for preview your editing