Foundation CSS is a front-end framework used for responsive websites, apps, and emails for any device. It also has many front-end templates like Bootstrap, Semantic UI, and other Front-end frameworks. It is flexible, readable and it is completely customizable. Top tech giants like Adobe, Amazon, Cisco, Hp, Mozilla, Samsung, etc. are using Foundation CSS. In this article, we are going to build a simple webpage with Responsive Accordion Tabs in Foundation CSS.
Responsive Accordion Tabs: These are one of the Foundation CSS Containers that are used to switch between two components at different breakpoints responsively. The content of a heading or a topic will be hidden until the particular topic was clicked. The content will be displayed as a drop-down box and other topic content will be automatically hidden. It will switch between tabs to list and vice versa from device to device responsively.
Foundation CSS Responsive Accordion Tabs Classes:
- accordion: This class is used to make the unordered List into an accordion.
- accordion-item: This class is used to make the list items to accordion items.
- accordion-title: This class is used to set the title for the respective accordion items.
- accordion-content: This class is used todisplay the content under its respective accordion item.
Foundation CSS Responsive Accordion Tabs Attributes:
- data-responsive-accordion-tabs: This attribute is used to make the accordion change from Tabs to List responsively when the webpage size is changed.
- data-responsive-accordion-tabs: This attribute is used to make the accordion change from Tabs to List and List to Tabs responsively when the webpage width changes respectively.
- data-accordion-item: This attribute is used to display the content when the accordion item is clicked.
- data-tab-content: This attribute is used to display the content when the accordion item is clicked.
Syntax:
<ul class="accordion"
data-responsive-accordion-tabs="accordion large-tabs">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
// Accordion title
</a>
<div class="accordion-content" data-tab-content>
// Accordion content
</div>
</li>
</ul>Example 1: In this example, the accordion will be listed as a tab when the webpage’s width is wide and will be listed as lists when the width is narrow. We will use the data-responsive-accordion-tabs=”accordion large-tabs”.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Responsive Accordion Tabs</title>
<!-- Foundation CSS Stylesheet -->
<link rel="stylesheet"
href=
<!-- jQuery CDN -->
<script src=
</script>
<!-- Foundation CSS JavaScript -->
<script src=
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Foundation CSS Responsive Accordion Tabs</h3>
<div style="width: 1100px;">
<!-- Creating an unordered list as an accordion -->
<ul class="accordion"
data-responsive-accordion-tabs="accordion large-tabs">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<h6>HTML</h6>
</a>
<div class="accordion-content"
data-tab-content>
<p>
HTML stands for HyperText Markup Language.
It is used to design web pages using a markup
language. It is the combination of Hypertext
and Markup language. Hypertext defines the link
between the web pages.
</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<h6>CSS</h6>
</a>
<div class="accordion-content" data-tab-content>
<p>CSS (Cascading Style Sheets) is a stylesheet language
used to design the webpage to make it attractive. The
reason for using this is to simplify the process of
making web pages presentable. It allows you to apply
styles to web pages. More importantly, it enables you
to do this independent of the HTML that makes up each
web page.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#"
class="accordion-title">
<h6>JavaScript</h6>
</a>
<div class="accordion-content"
data-tab-content>
<p>JavaScript is the world most popular lightweight,
interpreted compiled programming language. It
is also known as scripting language for web pages.
It is well-known for the development of web pages,
many non-browser environments also use it. JavaScript
can be used for Client-side developments as well as
Server-side developments.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<h6>Bootstrap</h6>
</a>
<div class="accordion-content" data-tab-content>
<p>Bootstrap is a free and open-source tool collection
for creating responsive websites and web
applications. It is the most popular HTML, CSS, and
JavaScript framework for developing responsive,
mobile-first websites. Nowadays, the websites are
perfect for all the browsers (IE, Firefox, and
Chrome) and for all sizes of screens (Desktop, Tablets,
Phablets, and Phones).
</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<h6>Reactjs</h6>
</a>
<div class="accordion-content"
data-tab-content>
<p>React is a declarative, efficient, and flexible
JavaScript library for building user interfaces.
It’s ‘V’ in MVC. ReactJS is an open-source,
component-based front-end library responsible only
for the view layer of the application. It is
maintained by Facebook.</p>
</div>
</li>
</ul>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Responsive Accordion Tabs
Example 2: In this example, the accordion will be listed as a list when the webpage’s width is wide and it will be listed as tabs when the width is medium and at last it will be again listed as a list when the width is narrow. We use data-responsive-accordion-tabs=”accordion medium-tabs large-accordion”.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Responsive Accordion Tabs</title>
<!-- Foundation CSS Stylesheet -->
<link rel="stylesheet" href=
<!-- jQuery CDN -->
<script src=
</script>
<!-- Foundation CSS JavaScript -->
<script src=
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Foundation CSS Responsive Accordion Tabs</h3>
<div style="width: 1100px;">
<!-- Creating an unordered list as an accordion -->
<ul class="accordion"
data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<h6>HTML</h6>
</a>
<div class="accordion-content"
data-tab-content>
<p>
HTML stands for HyperText Markup Language.
It is used to design web pages using a markup
language. It is the combination of Hypertext
and Markup language. Hypertext defines the link
between the web pages.
</p>
</div>
</li>
<li class="accordion-item"
data-accordion-item>
<a href="#"
class="accordion-title">
<h6>CSS</h6>
</a>
<div class="accordion-content" data-tab-content>
<p>CSS (Cascading Style Sheets) is a stylesheet language
used to design the webpage to make it attractive. The
reason for using this is to simplify the process of
making web pages presentable. It allows you to apply
styles to web pages. More importantly, it enables you
to do this independent of the HTML that makes up each
web page.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<h6>JavaScript</h6>
</a>
<div class="accordion-content"
data-tab-content>
<p>JavaScript is the world most popular lightweight,
interpreted compiled programming language. It
is also known as scripting language for web pages.
It is well-known for the development of web pages,
many non-browser environments also use it. JavaScript
can be used for Client-side developments as well as
Server-side developments.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<h6>Bootstrap</h6>
</a>
<div class="accordion-content"
data-tab-content>
<p>Bootstrap is a free and open-source tool collection
for creating responsive websites and web
applications. It is the most popular HTML, CSS, and
JavaScript framework for developing responsive,
mobile-first websites. Nowadays, the websites are
perfect for all the browsers (IE, Firefox, and
Chrome) and for all sizes of screens (Desktop, Tablets,
Phablets, and Phones).
</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
<h6>Reactjs</h6>
</a>
<div class="accordion-content" data-tab-content>
<p>React is a declarative, efficient, and flexible
JavaScript library for building user interfaces.
It’s ‘V’ in MVC. ReactJS is an open-source,
component-based front-end library responsible only
for the view layer of the application. It is
maintained by Facebook.</p>
</div>
</li>
</ul>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Responsive Accordion Tabs
Reference: https://get.foundation/sites/docs/accordion.html