Foundation CSS Collapsing Tabs
Last Updated :
03 Mar, 2022
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 to navigate multiple documents in a single container without leaving the page. There are various types of tab variations in Foundation CSS such as horizontal tabs, vertical tabs, and collapsing tabs. In this article, we will learn about the collapsing tabs in the Foundation CSS.
The Collapsing tabs variation makes the tab collapse on click if it is open. To create a collapsing tab in Foundation CSS, we use the data-active-collapse attribute whose value is set to true. By default, the data-active-collapse attribute’s value is set to false.
Foundation CSS Collapsing Tabs Attribute:
- data-active-collapse: This attribute allows the tab to collapse when clicked. It accepts the boolean values & the default value is false. If set to true, it will make the tab collapse if clicked on it.
Syntax:
<ul class = "tabs" data-active-collapse="true">
<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 collapsing tabs made using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Tabs</strong>
<br />
</center>
<ul class="tabs"
data-active-collapse="true"
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 Horizontal Collapsing Tabs
Example 2: This is a basic example illustrating vertical collapsing tabs made using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Tabs</strong>
<br />
</center>
<ul class="vertical tabs"
data-active-collapse="true"
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 Vertical Collapsing Tabs
Reference: https://get.foundation/sites/docs/tabs.html#collapsing-tabs
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...