Foundation CSS Accordion Advanced Options
Last Updated :
29 Mar, 2022
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. This framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.
Foundation CSS Accordion is used to display a large amount of information in a very small place inside a container. We can access each of them by switching between the different items. The Accordion Advanced Options contains the various option for the accordion, which includes multi-expanding of the accordion, closing all the accordions at a moment & disabling to access the accordions.
Foundation CSS Accordion Advanced Options:
- Multi-expand: This helps us to expand multiple panes.
- All Closed: This helps us to close all the panes.
- Disabled: This helps us to disable the panes.
Foundation CSS Accordion Advanced Options Attributes:
- data-accordion: This attribute enables the accordion options & must be specified before the required attributes.
- data-multi-expand: This attribute is used to open multiple panes at the same time.
- data-allow-all-closed: This attribute is used to close all the panes.
- disabled: This attribute is used to disable the panes.
Syntax:
<ul class="accordion" data-accordion
Accordion-Advanced-Options-Attribute" >
Content
</ul>Example 1: The following example demonstrates the Foundation CSS Accordion Advanced Options using the Multi-expand attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
</head>
<body style="padding: 50px;">
<center>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>
Foundation CSS Accordion Advanced Options - Multi-expand
</h3>
<ul class="accordion" data-accordion data-multi-expand="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GFG 1</a>
<div class="accordion-content" data-tab-content>
<p> A Computer Science portal for geeks. </p>
</div>
</li>
<li class="accordion-item"
data-accordion-item>
<a href="#" class="accordion-title">GFG 2</a>
<div class="accordion-content" data-tab-content>
<p> Computer Science portal </p>
</div>
</li>
<li class="accordion-item"
data-accordion-item>
<a href="#" class="accordion-title">GFG 3</a>
<div class="accordion-content" data-tab-content>
<p> GeeksforGeeks </p>
</div>
</li>
</ul>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
Output:
Foundation CSS Accordion Advanced Options - Multi-expandExample 2: The following example demonstrates the Foundation CSS Accordion Advanced Options using the All Closed attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
</head>
<body style="padding: 50px;">
<center>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>
Foundation CSS Accordion Advanced Options - All Closed
</h3>
<ul class="accordion"
data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GFG 1</a>
<div class="accordion-content" data-tab-content>
<p> A Computer Science portal for geeks. </p>
</div>
</li>
<li class="accordion-item"
data-accordion-item>
<a href="#" class="accordion-title">GFG 2</a>
<div class="accordion-content" data-tab-content>
<p> Computer Science portal </p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GFG 3</a>
<div class="accordion-content" data-tab-content>
<p> GeeksforGeeks </p>
</div>
</li>
</ul>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
Output:
Foundation CSS Accordion Advanced Options - All ClosedExample 3: The following example demonstrates the Foundation CSS Accordion Advanced Options using the Disabled attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</script>
</head>
<body style="padding: 50px;">
<center>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>
Foundation CSS Accordion Advanced Options - Disabled
</h3>
<ul class="accordion" data-accordion disabled>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GFG 1</a>
<div class="accordion-content" data-tab-content>
<p> A Computer Science portal for geeks. </p>
</div>
</li>
<li class="accordion-item"
data-accordion-item>
<a href="#" class="accordion-title">GFG 2 </a>
<div class="accordion-content" data-tab-content>
<p> Computer Science portal </p>
</div>
</li>
<li class="accordion-item"
data-accordion-item>
<a href="#" class="accordion-title">GFG 3</a>
<div class="accordion-content" data-tab-content>
<p> GeeksforGeeks </p>
</div>
</li>
</ul>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
Output:
Foundation CSS Accordion Advanced Options - Disabled
Reference: https://get.foundation/sites/docs/accordion.html#advanced-options
Similar Reads
Foundation CSS Accordion and URLs
Foundation CSS is a framework that makes it simple to create stunning responsive websites, apps, and emails that look wonderful and are available on any device, an open-source and responsive front-end framework created by the ZURB foundation in September 2011. Numerous businesses, like Facebook, eBa
5 min read
Foundation CSS Accordion Basics
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. This framework
3 min read
Foundation CSS Accordion Menu Basics
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. This framework
3 min read
Foundation CSS Accordion Menu
Foundation CSS Accordion Menu is used to convert the basic vertical menu into an expandable accordion menu. To convert the menu into an accordion menu the data-accordion-menu attribute is used. In this article, we will discuss Foundation CSS Accordion Menu. Foundation CSS Accordion Menu Class:accord
2 min read
Foundation CSS Responsive Accordion Tabs Basics
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, Cis
8 min read
Foundation CSS Kitchen Sink Accordion
Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it really easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on Saas-like boot
5 min read
Foundation CSS Responsive Accordion Tabs
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, Cis
6 min read
Foundation CSS Accordion Sass Reference
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. This framework
4 min read
Foundation CSS Accordion Submenu Toggle
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. This framework
3 min read
Foundation CSS Top Bar Advanced Layout
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,
4 min read