How TO - Tab Headers






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



How TO - Tab Headers



❮ Previous
Next ❯



Learn how to create tab headers with CSS and JavaScript.




Tab Headers


Click on the "city" buttons to display the appropriate header:




London


London is the capital city of England.





Paris


Paris is the capital of France.





Tokyo


Tokyo is the capital of Japan.





Oslo


Oslo is the capital of Norway.










function openCity(cityName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
tablinks[i].style.color = "";
}
document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;
elmnt.style.color = "white";

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();



Try it Yourself »





Create Togglable Tab Headers


Step 1) Add HTML:


Example



<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="Oslo" class="tabcontent">
 
<h3>Oslo</h3>
  <p>Oslo is the capital of Norway.</p>
</div>

<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this,
'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo',
this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo',
this, 'orange')">Oslo</button>


Create buttons to open specific
tab content. All <div> elements with class="tabcontent" are hidden by default
(with CSS & JS). When the user clicks on a button - it will open the tab content
that "matches" this button.




Step 2) Add CSS:

Style the buttons and the tab content:



Example



/* Style the tab buttons */
.tablink {
   
background-color: #555;
    color: white;
   
float: left;
    border: none;
   
outline: none;
    cursor: pointer;
   
padding: 14px 16px;
    font-size: 17px;
   
width: 25%;
}

/* Change background color of buttons on hover */
.tablink:hover {
   
background-color: #777;
}

/* Set default styles for tab content */
.tabcontent
{
    color: white;
    display: none;
   
padding: 50px;
    text-align: center;
}

/* Style
each tab content individually */
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}







<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->





Step 3) Add JavaScript:


Example



function openCity(cityName, elmnt, color) {
    // Hide all
elements with class="tabcontent" by default */
    var i,
tabcontent, tablinks;
    tabcontent =
document.getElementsByClassName("tabcontent");
    for (i =
0; i < tabcontent.length; i++) {
       
tabcontent[i].style.display = "none";
    }

    // Remove the background color of all tablinks/buttons
   
tablinks = document.getElementsByClassName("tablink");
   
for (i = 0; i < tablinks.length; i++) {
       
tablinks[i].style.backgroundColor = "";
    }

    // Show the specific tab content
   
document.getElementById(cityName).style.display = "block";

   
// Add the specific color to the button used to open the tab content
   
elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen"
and click on it
document.getElementById("defaultOpen").click();

Try it Yourself »


Tip: Also check out How To - Tabs.





❮ Previous
Next ❯

Popular posts from this blog

How to check contact read email or not when send email to Individual?

Displaying single band from multi-band raster using QGIS

How many registers does an x86_64 CPU actually have?