Skip to content
Related Articles

Related Articles

Foundation CSS Tabs

View Discussion
Improve Article
Save Article
  • Last Updated : 20 Feb, 2022
View Discussion
Improve Article
Save Article

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. 

Tabs are components that help us navigate multiple documents in a single container without leaving the page. They act as a link that changes the content inside the container based on which tab is active.

Foundation CSS Tabs Classes:

  • tabs: This class creates a basic container for tabs inside which all the tabs are created. This is used on <ul> element.
  • tabs-title: This class creates the tabs inside the container and values inside this class div are used as titles for the tabs. This is used on <li> elements.
  • is-active: This class lets us know which class and pane are active by default on reload.
  • tabs-panel: This class contains all the panel data associated with each tab.
  • tabs-content: This class contains the data that is to be displayed by tabs. This class is nested inside a parent div with a class tabs-panel.

Syntax:

<ul class = "tabs" data-tabs id = "tabs_example">
    <li class = "tabs-title is-active">...</li>
    ...
</ul>
<div class = "tabs-content">
    <div class = "tabs-panel is-active">
        ...
    </div>
</div>

Example 1: This is a basic example illustrating horizontal tabs made using Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 30px;">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>Foundation CSS Tabs</strong>
        <br /><br />
    </center>
    <ul class="tabs" data-tabs id="tabs_example">
        <li class="tabs-title is-active">
            <a href="#content1">Tab1</a>
        </li>
        <li class="tabs-title">
            <a href="#content2">Tab2</a>
        </li>
        <li class="tabs-title">
            <a href="#content3">Tab3</a>
        </li>
        <li class="tabs-title">
            <a href="#content4">Tab4</a>
        </li>
    </ul>
  
    <div class="tabs-content" data-tabs-content="tabs_example">
        <div class="tabs-panel is-active" id="content1">
            <h1>GeeksforGeeks</h1>
        </div>
  
        <div class="tabs-panel" id="content2">
            <img src=
        </div>
  
        <div class="tabs-panel" id="content3">
            <p>This is tab 3</p>
  
            <img src=
        </div>
  
        <div class="tabs-panel" id="content4">
            <img src=
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output:

Foundation CSS Tabs

Foundation CSS Tabs

Example 2: This is a basic example illustrating vertical tabs made using Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 30px;">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>Foundation CSS Tabs</strong>
        <br /><br />
    </center>
    <ul class="vertical tabs" data-tabs id="tabs_example">
        <li class="tabs-title is-active">
            <a href="#content1">Tab1</a>
        </li>
        <li class="tabs-title">
            <a href="#content2">Tab2</a>
        </li>
    </ul>
  
    <div class="tabs-content" data-tabs-content="tabs_example">
        <div class="tabs-panel is-active" id="content1">
            <h1>GeeksforGeeks</h1>
        </div>
  
        <div class="tabs-panel" id="content2">
            <img src=
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output:

Foundation CSS Tabs

Foundation CSS Tabs

Reference: https://get.foundation/sites/docs/tabs.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!