html tabs without javascript

Learn About how to create tabs with CSS and JavaScript On Your Webpage

Tabs

The Tabs Coding are perfect for single page web application, or for web pages and post capable of displaying different subjects of your Content:


    Example

    Click on the buttons inside the tabbed menu:

    İstanbul

    İstanbul is the capital city of Turkey.

    Islamabad

    Islamabad is the capital of Pakistan.

    Tokyo

    Tokyo is the capital of Japan.

    Create Toggleable Tabs On Your Web

    Copy This Code And Edit It Your Own Source
     <!DOCTYPE html>  
     <html>  
     <head>  
     <meta name="viewport" content="width=device-width, initial-scale=1">  
     <style>  
     body {font-family: Arial;}  
     /* Style the tab */  
     .tab {  
      overflow: hidden;  
      border: 1px solid #ccc;  
      background-color: #f1f1f1;  
     }  
     /* Style the buttons inside the tab */  
     .tab button {  
      background-color: inherit;  
      float: left;  
      border: none;  
      outline: none;  
      cursor: pointer;  
      padding: 14px 16px;  
      transition: 0.3s;  
      font-size: 17px;  
     }  
     /* Change background color of buttons on hover */  
     .tab button:hover {  
      background-color: #ddd;  
     }  
     /* Create an active/current tablink class */  
     .tab button.active {  
      background-color: #ccc;  
     }  
     /* Style the tab content */  
     .tabcontent {  
      display: none;  
      padding: 6px 12px;  
      border: 1px solid #ccc;  
      border-top: none;  
     }  
     </style>  
     </head>  
     <body>  
     <h2>Tabs</h2>  
     <p>Click on the buttons inside the tabbed menu:</p>  
     <div class="tab">  
      <button class="tablinks" onclick="openCity(event, 'London')">London</button>  
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>  
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>  
     </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>  
     <script>  
     function openCity(evt, cityName) {  
      var i, tabcontent, tablinks;  
      tabcontent = document.getElementsByClassName("tabcontent");  
      for (i = 0; i < tabcontent.length; i++) {  
       tabcontent[i].style.display = "none";  
      }  
      tablinks = document.getElementsByClassName("tablinks");  
      for (i = 0; i < tablinks.length; i++) {  
       tablinks[i].className = tablinks[i].className.replace(" active", "");  
      }  
      document.getElementById(cityName).style.display = "block";  
      evt.currentTarget.className += " active";  
     }  
     </script>  
     </body>  
     </html>