Open In App

Foundation CSS Vertical Tabs

Improve
Improve
Like Article
Like
Save
Share
Report

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. 

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. Vertical tabs are those tabs that are created in a vertical direction and content is displayed on the right side of the tab. In this article, we will discuss how to create the vertical tabs in Foundation CSS.

Foundation CSS Vertical Tabs classes:

  • tabs: It is used to create the tabs.
  • vertical: It is used to create vertical tabs.
  • tabs-title: It is used to give the title of the tab.
  • tabs-content: It is used to give the content of the tab.

Syntax: 

<ul class="vertical tabs" 
    data-tabs id="">
    .........
</ul>

Example 1: Below is the example that illustrates the vertical tabs with content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
        crossorigin="anonymous">
  
    <script src=
    </script>
  
    <script src=
        crossorigin="anonymous">
    </script>
</head>
  
<body>    
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
  
    <h3>
        Foundation CSS Vertical Tabs
    </h3>
  
    <div class="grid-x">
      <ul class="vertical tabs" data-tabs id="vertical-tabs">
      <li class="tabs-title is-active">
          <a href="#tab1" aria-selected="true">First Tab</a>
      </li>
  
      <li class="tabs-title">
          <a href="#tab2">Second Tab</a>
      </li>
  
      <li class="tabs-title">
          <a href="#tab3">Third Tab</a>
      </li>
      </ul>
  
     <div>
       <div class="tabs-content vertical" 
            data-tabs-content="vertical-tabs">
         <div class="tabs-panel is-active" id="tab1">
           <p>Tab 1 content</p>
           <p>
              A Computer Science portal for geeks. 
              It contains well written, 
              well thought and well explained computer 
              science and programming articles
           </p>
         </div>
  
         <div class="tabs-panel" id="tab2">
           <p>Tab 2 content</p>
           <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="tab3">
           <p>Tab 3 content</p>
           <p>
              A Computer Science portal for geeks. 
              It contains well written, well thought and 
              well explained computer science and programming articles
           </p>
         </div>
       </div>
     </div>
    </div>
  
    <script>
      $(document).ready(function() {
          $(document).foundation();
      })
    </script>
</body>
  
</html>


Output:

Example 2: Below is the example that illustrates the vertical tabs with text and images.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
        crossorigin="anonymous">
  
    <script src=
    </script>
  
    <script src=
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
  
    <h3>Foundation CSS Vertical Tabs</h3>
  
    <div class="grid-x">
        <ul class="vertical tabs" data-tabs id="vertical-tabs">
            <li class="tabs-title is-active">
                <a href="#tab1" aria-selected="true">First Tab</a>
            </li>
  
            <li class="tabs-title">
                <a href="#tab2">Second Tab</a>
            </li>
  
            <li class="tabs-title">
                <a href="#tab3">Third Tab</a>
            </li>
  
            <li class="tabs-title">
                <a href="#tab4">Fourth Tab</a>
            </li>
  
            <li class="tabs-title">
                <a href="#tab5">Fifth Tab</a>
            </li>
        </ul>
  
        <div>
            <div class="tabs-content vertical" data-tabs-content="vertical-tabs">
                <div class="tabs-panel is-active" id="tab1">
                    <p>Tab 1 content</p>
                    <p>
                        A Computer Science portal for geeks. 
                        It contains well written, well thought 
                        and well explained computer science and 
                        programming articles
                    </p>
                </div>
  
                <div class="tabs-panel" id="tab2">
                    <p>Tab 2 Image</p>
                    <strong>GeeksforGeeks Image</strong>
                    <img src=
                        alt="GFG">
                </div>
  
                <div class="tabs-panel" id="tab3">
                    <p>Tab 3 content</p>
                    <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="tab4">
                    <p>Tab 4 Image</p>
                    <strong>GFG Image</strong>
                    <img src=
                </div>
  
                <div class="tabs-panel" id="tab5">
                    <p>Tab 5 content</p>
                    <p>
                        With every tick of time, we are adding 
                        arrows in our quiver. From articles on various 
                        computer science subjects for practice
                    </p>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output:

Reference: https://get.foundation/sites/docs/tabs.html#vertical-tabs



Last Updated : 02 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads