W3.CSS — Tabs

Basic Tabs

<div class="w3-bar w3-black">
    <button class="w3-bar-item w3-button" onclick="openTab('tab1')">Tab 1</button>
    <button class="w3-bar-item w3-button" onclick="openTab('tab2')">Tab 2</button>
    <button class="w3-bar-item w3-button" onclick="openTab('tab3')">Tab 3</button>
</div>

<div id="tab1" class="w3-container tab">
    <h3>Tab 1 Content</h3>
    <p>This is the content for tab 1.</p>
</div>

<div id="tab2" class="w3-container tab" style="display:none">
    <h3>Tab 2 Content</h3>
    <p>This is the content for tab 2.</p>
</div>

<div id="tab3" class="w3-container tab" style="display:none">
    <h3>Tab 3 Content</h3>
    <p>This is the content for tab 3.</p>
</div>

<script>
function openTab(tabName) {
    var i;
    var x = document.getElementsByClassName("tab");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "block";
}
</script>

Tab Styles

<!-- Colored tabs -->
<div class="w3-bar w3-blue">
    <button class="w3-bar-item w3-button" onclick="openTab('tab1')">Tab 1</button>
    <button class="w3-bar-item w3-button" onclick="openTab('tab2')">Tab 2</button>
</div>

<!-- Underlined tabs -->
<div class="w3-bar w3-border-bottom w3-white">
    <button class="w3-bar-item w3-button w3-blue" onclick="openTab('tab1')">Tab 1</button>
    <button class="w3-bar-item w3-button" onclick="openTab('tab2')">Tab 2</button>
</div>

Tab Examples

<!-- Profile tabs -->
<div class="w3-bar w3-black">
    <button class="w3-bar-item w3-button" onclick="openTab('about')">About</button>
    <button class="w3-bar-item w3-button" onclick="openTab('posts')">Posts</button>
    <button class="w3-bar-item w3-button" onclick="openTab('friends')">Friends</button>
</div>

<div id="about" class="w3-container tab">
    <h3>About Me</h3>
    <p>Profile information goes here.</p>
</div>

<div id="posts" class="w3-container tab" style="display:none">
    <h3>My Posts</h3>
    <p>Posts and articles go here.</p>
</div>

<div id="friends" class="w3-container tab" style="display:none">
    <h3>My Friends</h3>
    <p>Friends list goes here.</p>
</div>

Mini Practice

Create HTML code that:

1. Creates basic tabs
2. Adds colored tabs
3. Creates a profile tab interface
4. Uses tabs with different content

Up Next

Next: Learn about W3.CSS Slideshow.