In this example below you will see how to do a Tabs with some HTML / CSS and Javascript

This awesome code was written by hdskelcher, you can see more from this user in the personal repository.
You can find the original code on
Copyright hdskelcher ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
      <link rel="stylesheet" href="css/style.css">



  <div class="tab">
  <a class="tablinks" onclick="openCity(event, 'London')">London</a>
  <a class="tablinks" onclick="openCity(event, 'Paris')">Paris</a>
  <a class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a>
  <a class="tablinks" onclick="openCity(event, 'Seattle')">Seattle</a>

<div id="London" class="tabcontent">
  <p>London is the capital city of England.</p>

<div id="Paris" class="tabcontent">
  <p>Paris is the capital of France.</p> 

<div id="Tokyo" class="tabcontent">
  <p>Tokyo is the capital of Japan.</p>

<div id="Seattle" class="tabcontent">
  <p>Seattle is the best ever!</p>

    <script  src="js/index.js"></script>



/*Downloaded from */
* {
  box-sizing: border-box;
} {
    overflow: hidden;
    background-color: #ffffff;
  border: thin solid #ededed;

/* Style the links inside the tab */ a {
    float: left;
    display: block;
  width: 25%;
  padding: 2%;
  text-align: center;

/* Change background color of links on hover */ a:hover {
    background-color: #dddddd;

/* Create an active/current tablink class */ a:focus, .active {
    background-color: #ededed;

/* Style the tab content */
.tabcontent {
    padding: 6px 12px;
    display: none;

/*Downloaded from */
function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";