HTML

<div class="hero">
  <div class="btn-box">
    <button id="btn1" onclick="openHTML()">HTML</button>
    <button id="btn2" onclick="openCSS()">CSS</button>
    <button id="btn3" onclick="openJS()">Javascript</button>
  </div>
  <div id="content1" class="content">
    <div class="content-left">
      <h2>Left HTML</h2>
      <p>Lorem Ipsum is simply dummy text 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 u</p>
    </div>
    <div class="content-right">
      <img src="https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png" alt="">
    </div>
  </div>
  <div id="content2" class="content">
    <div class="content-left">
      <h2>Left CSS</h2>
      <p>Lorem Ipsum is simply dummy text 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 u</p>
    </div>
    <div class="content-right">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHrWdycKUB4lP9WYjdpPJdLXTUaDbdaYZ_LRcplbhLet-54LJ1&s" alt="">
    </div>
  </div>
  <div id="content3" class="content">
    <div class="content-left">
      <h2>Left JS</h2>
      <p>Lorem Ipsum is simply dummy text 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 u</p>
    </div>
    <div class="content-right">
      <img src="https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png" alt="">
    </div>
  </div>
</div>

CSS

.hero{
  width: 80%;
  height: 450px;
  position: relative;
  margin: 100px auto;
  overflow: hidden;
}
.btn-box{
  display: flex;
  border: 1px solid #ccc;
}
.btn-box button{
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  margin-right: 50px;
  font-size: 20px;
  font-weight: bold;
}
.content-right img{
  width: 250px;
}
.content{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5% auto;
  position: absolute;
  transform:translateX(100%);
  transition: 0.3s;
}
.content-left{
  flex-basis: 50%;
  text-align: left;
}
.content-left p{
  font-size: 13px;
  padding: 10px 0;
}
.content-right{
  flex-basis: 50%;
  text-align: center;
}
#content1{
  transform: translateX(0px);
}
#btn1{
  color: #ff7846;
}

JS

var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
var content3 = document.getElementById("content3");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
function openHTML(){
  content1.style.transform = "translateX(0)";
  content2.style.transform = "translateX(100%)";
  content3.style.transform = "translateX(100%)";
  btn1.style.color = "#ff7846";
  btn2.style.color = "#000";
  btn3.style.color = "#000";
  content1.style.transitionDelay = "0.3s";
  content2.style.transitionDelay = "0s";
  content3.style.transitionDelay = "0s";
}
function openCSS(){
  content1.style.transform = "translateX(100%)";
  content2.style.transform = "translateX(0)";
  content3.style.transform = "translateX(100%)";
    btn1.style.color = "#000";
    btn2.style.color = "#ff7846";
    btn3.style.color = "#000";
  content1.style.transitionDelay = "0s";
  content2.style.transitionDelay = "0.3s";
  content3.style.transitionDelay = "0s";
}
function openJS(){
  content1.style.transform = "translateX(100%)";
  content2.style.transform = "translateX(100%)";
  content3.style.transform = "translateX(0)";
    btn1.style.color = "#000";
    btn2.style.color = "#000";
    btn3.style.color = "#ff7846";
  content1.style.transitionDelay = "0s";
  content2.style.transitionDelay = "0s";
  content3.style.transitionDelay = "0.3s";
}

Source Code

Ref: CSS transform Property , CSS Transitions

The post Create tab layout for website using HTML CSS and JavaScript first appeared on Bipon's Diary.