Foundation CSS Tabs Basics

Last Updated : 17 Mar, 2022

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. 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.

Foundation CSS Tabs are the navigation tabs that are used to show the content in the panel without leaving the current page. We can save space on our webpage by creating tabs and storing some content on them. In this article, we will discuss Tabs Basics in Foundation CSS.

Foundation CSS Tabs Basics Classes:

tabs: This class is used for creating the tabs.
tabs-title: This class is used for giving the tab title.
tabs-content: This class is used for giving the tab content.
tabs-panel: This class is used for creating the panel.

Syntax:

<ul class="tabs" data-tabs id="tabs-basic">
    <li class="tabs-title is-active">
        <a href="#tabBasic1"> GFG Tab 1 </a>
    </li>
    <li class="tabs-title">
        <a href="#tabBasic2"> GFG Tab 2 </a>
    </li>

</ul>

Example 1: The following code demonstrates the Foundation CSS Tabs Basics with some content.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Tabs Basics</title> 
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <!-- Compressed JavaScript -->            
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body>     
  <center> 
    <h2 style="color: green;">GeeksforGeeks</h2> 
    <h3> Foundation CSS Tabs Basics </h3> 
  </center> 
  
  <ul class="tabs" 
      data-tabs id="tabs-basic"> 
    <li class="tabs-title is-active"> 
      <a href="#tabBasic1"
         aria-selected="true"> 
        GFG Tab 1  
      </a> 
    </li> 
    <li class="tabs-title"> 
      <a href="#tabBasic2"> GFG Tab 2 </a> 
    </li> 
    <li class="tabs-title"> 
      <a href="#tabBasic3"> GFG Tab 3 </a> 
    </li> 
    <li class="tabs-title"> 
      <a href="#tabBasic4"> GFG Tab 4 </a> 
    </li> 
  </ul> 
  
  <div class="tabs-content" 
      data-tabs-content="tabs-basic"> 
    <div class="tabs-panel is-active"
         id="tabBasic1"> 
      <p> 
        A Computer Science portal for geeks.  
      </p> 
    </div> 
  
    <div class="tabs-panel"
         id="tabBasic2"> 
      <p> 
        With the idea of imparting programming  
        knowledge, Mr. Sandeep Jain, an IIT Roorkee  
        alumnus started a dream, GeeksforGeeks. 
      </p> 
  
    </div> 
  
    <div class="tabs-panel" 
         id="tabBasic3"> 
      <p>  
        It contains well written, well thought  
        and well explained computer science  
        and programming articles. 
      </p> 
    </div> 
  
    <div class="tabs-panel" 
         id="tabBasic4"> 
      <p>  
        GeeksforGeeks 
      </p> 
    </div> 
  </div> 
  <script> 
    $(document).foundation(); 
  </script> 
</body> 
</html>

Output:

Foundation CSS Tabs Basics

Example 2: The following code demonstrates the Foundation CSS Tabs Basics with a link, input field, content, and images.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Foundation CSS Tabs Basics</title> 
  <!-- Compressed CSS -->
  <link rel="stylesheet"
        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous"> 
  
  <!-- Compressed JavaScript -->            
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
  </script> 
  <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" 
          crossorigin="anonymous"> 
  </script> 
</head> 
  
<body>     
  <center> 
    <h2 style="color: green;"> GeeksforGeeks </h2> 
    <h3> Foundation CSS Tabs Basics </h3> 
  </center> 
  
  <ul class="tabs" 
      data-tabs id="tabs-basic"> 
    <li class="tabs-title is-active"> 
      <a href="#tabBasic1" 
         aria-selected="true"> GFG Tab 1 </a> 
    </li> 
    <li class="tabs-title"> 
      <a href="#tabBasic2"> GFG Tab 2 </a> 
    </li> 
    <li class="tabs-title"> 
      <a href="#tabBasic3"> GFG Tab 3 </a> 
    </li> 
    <li class="tabs-title"> 
      <a href="#tabBasic4"> GFG Tab 4 </a> 
    </li> 
    <li class="tabs-title"> 
      <a href="#tabBasic5"> GFG Tab 5 </a> 
    </li> 
  </ul> 
  
  <div class="tabs-content" 
      data-tabs-content="tabs-basic"> 
    <div class="tabs-panel is-active" id="tabBasic1"> 
      <strong> GeeksforGeeks </strong> <br> 
      <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
    </div> 
  
    <div class="tabs-panel" id="tabBasic2"> 
      <a href="#"> This is link </a> 
      <p> 
        With the idea of imparting programming  
        knowledge, Mr. Sandeep Jain, an IIT Roorkee  
        alumnus started a dream, GeeksforGeeks. 
      </p> 
  
    </div> 
  
    <div class="tabs-panel"
         id="tabBasic3"> 
      <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> 
    </div> 
  
    <div class="tabs-panel"
         id="tabBasic4"> 
      <p> 
        A Computer Science portal for geeks.  
      </p> 
  
      <input type="text"
             placeholder="GeeksforGeeks"> 
    </div> 
  
    <div class="tabs-panel"
         id="tabBasic5"> 
      <strong> Computer Science portal </strong> <br> 
      <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"
           alt=""> 
    </div> 
  </div> 
  <script> 
    $(document).foundation(); 
  </script> 
</body> 
</html>