Tabs

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

Thumbnail
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 Codepen.io
Copyright hdskelcher ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <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>

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

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

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

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

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/hdskelcher/tabs-EWadRP */
* {
  box-sizing: border-box;
}
div.tab {
    overflow: hidden;
    background-color: #ffffff;
  border: thin solid #ededed;
}

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

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

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

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

/*Downloaded from https://www.codeseek.co/hdskelcher/tabs-EWadRP */
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";
}

Comments