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.
<!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.
<!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