W3.CSS Tabs
Tabbed Navigation
Tabs organize content into separate sections that can be opened one at a time.
W3.CSS provides the classes for styling tabs, while JavaScript is used to switch between the tab content.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
Tabbed navigation uses buttons to switch between different sections of content.
The example below uses the class city for all tab content.
JavaScript hides all the tab content, then displays the selected city:
Example
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
of England.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
Add buttons to open the tab content:
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button"
onclick="openCity('London')">London</button>
<button
class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
Use JavaScript to hide all tabs and display the selected tab:
function openCity(cityName) {
document.querySelectorAll(".city").forEach(city => {
city.style.display = "none";
});
document.getElementById(cityName).style.display = "block";
}
Try It Yourself »
JavaScript Explained
The openCity() function runs when the user clicks a tab button.
The function hides all elements with the city class, then displays the selected city.
Closable Tabs
London
London is the capital city of England.
To close a tab, add onclick="this.parentElement.style.display='none'"
to an element inside the tab container:
Example
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
Try It Yourself »
Active/Current Tab
To highlight the current tab/page the user is on, use JavaScript and add a color class to the active link. In the example below, we have added a "tablink" class to each link. That way, it is easy to get all links that is associated with tabs, and give the current tab link a "w3-red" class, to highlight it:
Example
function openCity(evt, cityName) {
const cities = document.querySelectorAll(".city");
const tablinks = document.querySelectorAll(".tablink");
cities.forEach(city => {
city.style.display = "none";
});
tablinks.forEach(tablink => {
tablink.classList.remove("w3-red");
});
document.getElementById(cityName).style.display = "block";
evt.currentTarget.classList.add("w3-red");
}
Try It Yourself »
Vertical Tabs
Example
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>
Try It Yourself »
Animated Tab Content
Use a w3-animate-* class to fade, zoom, or slide in tab content:
Example
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Try It Yourself »
Tabbed Image Gallery
Click on an image:
Example
<a href="#" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature" style="width:100%">
</a>
<div id="Nature" class="picture w3-display-container">
<img
src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'"
class="w3-display-topright">X</span>
<div
class="w3-display-bottomleft w3-container">Nature</div>
</div>
Try It Yourself »
Tabs in a Grid
This example uses a red bottom border instead of a background color to highlight the active tab:
Tabs in a Row
Tabs can also placed in a three-column Row.
The w3-third class divides a row into three equal columns.
On screens smaller than 601 pixels, it resizes to 100%.
Rezize the page to see the effect.
