'CSS Tabs'

We are defining the steps 'how to create - CSS Tabs'

Step1

Simply add the below code inside the <head> section of the page:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Step2

Add this style css before the closing of </head> tag

<style type="text/css">
body {font-family: Arial; font-size:16px;}

/* Style the tab */
.tab-panel {
overflow: hidden;
border: 1px solid #ccc;
background-color: #8b104e;
width: 90%;
}

/* Style the buttons inside the tab */
.tab-panel button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
color:#fff;
}

/* Change background color of buttons on hover */
.tab-panel button:hover {
background-color: #c7b198;
}

/* Create an active/current tablink class */
.tab-panel button.active {
background-color: #c7b198;
}

/* Style the tab content */
.tabcontent-panel {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;width: 90%;
text-align: left
}

/* Style the close button */
.topright {
float: right;
cursor: pointer;
font-size: 28px;
}

.topright:hover {color: red;}

</style>	

Step3

Paste the html into the <body> tag

<div align="center">
<div class="tab-panel">
  <button class="tablink " onclick="openCity(event, 'tab1')" id="default">Panel 01</button>
  <button class="tablink " onclick="openCity(event, 'tab2')">Panel 02</button>
  <button class="tablink active" onclick="openCity(event, 'tab3')">Panel 03</button>
</div>

<div id="tab1" class="tabcontent-panel" style="display: none;">  
<h3>What is Lorem Ipsum?</h3>
<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.</p>
</div>

<div id="tab2" class="tabcontent-panel" style="display: none;">
<h3>Why do we use it?</h3>
<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.</p>
</div>

<div id="tab3" class="tabcontent-panel" style="display: block;">
<h3>Where does it come from?</h3>
<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.</p>
</div>
</div>	

Step4

Paste the script before ending tag of the </body>

<script>
function openCity(ivt, conPanel) {
    var x, tabcon, tablinks;
    tabcon = document.getElementsByClassName("tabcontent-panel");
    for (x = 0; x < tabcon.length; x++) {
        tabcon[x].style.display = "none";
    }
    tablink = document.getElementsByClassName("tablink");
    for (x = 0; x < tablink.length; x++) {
        tablink[x].className = tablink[x].className.replace("active", "");
    }
    document.getElementById(conPanel).style.display = "block";
    ivt.currentTarget.className += " active";
}
// Get the element with id="default" and click on it
document.getElementById("default").click();
</script>
	
Copyright © 2020. All rights reserved.