Foundation Tabs

Tab navigation can effectively display different content and allow switching between content.

Tab usage<ul class="tabs" data-tab>To create, use <li> elements for each option and add.tab-titleclasses to create.

Tip:The currently selected item can use.activeclass.

Example

Try it Yourself »

Vertical Tabs

Vertical tabs can use.verticalClass:

Example

Try it Yourself »

Switch tabs

To set up switching tabs, you can use a <div> element with.contentclass. Add a unique ID to each tab, and link to the list item (<a href="../index.html" will open the option content with id="menu1"). Finally, place all option content in<div>on the element, the<div>Elements need to be added.tabs-contentclass, and initialize Foundation JS.

Note.activeThe class will automatically be added to the currently selected tab:

Example

<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#home">Home</a></li>
<li class="tab-title"><a href="#menu1">Menu 1</a></li>
<li class="tab-title"><a href="#menu2">Menu 2</a></li>
<li class="tab-title"><a href="#menu3">Menu 3</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="home">
    <h3>HOME</h3>
    <p>Home is where the heart is..</p>
</div>
<div class="content" id="menu1">
    <h3>Menu 1</h3>
    <p>Some text, blabla</p>
</div>
<div class="content" id="menu2">
    <h3>Menu 2</h3>
    <p>Some other text.</p>
</div>
<div class="content" id="menu3">
    <h3>Menu 3</h3>
    <p>Last tab.</p>
</div>
</div>


<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Try it Yourself »

tab fades in

Use CSS to customize the fade-in effect of the tabs:

Example

.tabs-content > .content.active {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

Try it Yourself »

other extensions