Foundation CSS Accordion
Last Updated :
21 Feb, 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 to 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.
We all have seen Accordion on modern websites. It helps us to display a large amount of information in a very small place inside a container. Thus, helping us arrange large amounts of data in a structured manner and we can access each of them by switching between the different items. In this article, we will learn how to make an accordion using Foundation CSS.
Foundation CSS Accordion Classes:
- accordion: This class is used to create the accordion along with the data-accordion attributes.
- accordion-item: Inside the accordion, there will be a number of panes with this class which will either be active (i.e open) or will open on clicking. To make a pane open the class is-active should be added to that pane.
- accordion-title: Each pane of the Accordion has a title which is written inside the <a> tag with the class name of accordion-title.
- accordion-content: The content of the accordion is written with this class along with the data-tab-content attribute.
Thus, when we arrange all these elements in a structure, we get some common syntax as the one given below:
Syntax:
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">..</a>
<div class="accordion-content" data-tab-content>
...
</div>
</li>
</ul>
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Accordion in Foundation CSS</h3>
<ul class="accordion" data-accordion>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 1</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 2</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 3</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 3</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 4</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 4</p>
</div>
</li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Note: In this article, we are using <ul> element to display the accordion element, but one can use any other element according to their demand and needs.
Now, we can also customize some features of the accordion using the other classes and attributes present in the Foundation CSS library.
Multi-expand Variant: By default, only one pane of the accordion can be expanded at one time. This setting can be changed by setting the “data-multi-expand” attribute to true in the <ul></ul> tags.
<ul class="accordion" data-accordion data-multi-expand="true">
...
</ul>
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Accordion in Foundation CSS</h3>
<ul class="accordion" data-accordion data-multi-expand="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 1</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 2</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 3</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 3</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 4</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 4</p>
</div>
</li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
All Closed Variant: By default, at least one pane should always be open in Accordion but this change is changed by setting the value of data-allow-all-closed attribute to true. By changing this feature , we can now keep all the panes of the accordion close.
Syntax:
<ul class="accordion" data-accordion data-allow-all-closed="true">
...
</ul>
Full Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Accordion in Foundation CSS</h3>
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 1</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 2</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 3</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 3</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 4</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 4</p>
</div>
</li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Disabled Variant: T there may be some conditions in our website when we don’t want the user to do pane switching in the accordion. Here, comes into action, the “disabled” attribute of the Foundation CSS. By adding the “disabled” option in the accordion, we can disable it, it will not allow any change (i.e any pane which is opened cannot be closed, and any pane which is closed cannot be opened).
Syntax:
<ul class="accordion" data-accordion disabled>
...
</ul>
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Accordion in Foundation CSS</h3>
<ul class="accordion" data-accordion disabled>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 1</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 2</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 3</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 3</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 4</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 4</p>
</div>
</li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/accordion.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...