Foundation CSS Kitchen Sink Accordion
Last Updated :
02 Mar, 2022
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 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. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. 

The Kitchen Sink has the Foundation elements to work well in our websites and applications. The Accordion element is a component that helps you to show a large amount of data in a limited space and then show and hide them as needed.
 They can be used to hold arbitrary types of content such as images, texts, links, reviews,
FAQs, etc.
Foundation CSS Kitchen Sink Accordion Classes:
- accordion: This class is used to create the accordion and is linked with the data-accordion attribute.
- accordion-item: This class is used to create the different panes inside an accordion and is linked with the data-accordion-item attribute. Any pane or accordion-item can be made active by using the is-active class along with the accordion-item class, ie [accordion-item is-active].
- accordion-title: This class is used to create an accordion title. It is used along with <a> tag with the class name of accordion-title.
- accordion-content: This class is used to display all the content inside each accordion tab and is linked with the data-tab-content attribute.
Syntax:
<div class="accordion" data-accordion>
<div class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title"></a>
<div class="accordion-content" data-tab-content>
<p>Content </p>
</div>
</div>
</div>
Example: This is the basic example for Kitchen Sink Accordion in Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h2>GeeksforGeesk</h2>
<h4>Foundation CSS Kitchen Sink Accordion</h4>
<div class="accordion" data-accordion>
<br>
<div class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 1
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion 1 subheading</p>
<a href="#">Link 1</a>
</div>
</div>
<div class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 2
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion 2 subheading</p>
<a href="#">Link 2</a>
</div>
</div>
<div class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 3
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion3 subheading</p>
<a href="#">Link 3</a>
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Accordion Advanced Options:
Foundation CSS provides the users with some advanced options as well to increase accessibility. These can be used along with the data-accordion attribute.
- all-closed: By default, one Accordion item always remains active. One can change this by turning the allowAllClosed option to ‘true’. Therefore, the div would have attribute as data-accordion data-allow-all-closed=”true” .
- multi-expand: By default, only one Accordion item is allowed to remain active. But, it can be changed by adding the Multi-expand option and switching its value to ‘true’. Therefore, the div would have attribute as data-accordion data-multi-expand=”true”.
- disabled: Disabled is a unique property by which the navigation in the Accordion can be disabled. Therefore, the div would have an attribute as data-accordion disabled.
Syntax:
<div class="accordion" attribute-name></div>
Example: The following code demonstrates the Kitchen sink Accordion class along with the all-closed variant.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h4>Foundation CSS Kitchen Sink Accordion</h4>
<div class="accordion"
data-accordion data-allow-all-closed="true">
<div class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 1
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion 1 content</p>
<a href="#">Link 1</a>
</div>
</div>
<div class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 2
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion 2 content</p>
<a href="#">Link 2</a>
</div>
</div>
<div class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 3
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion3 content</p>
<a href="#">Link 3</a>
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example: The following code demonstrates the Kitchen sink Accordion class along with the multi-expand variant.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h4>Foundation CSS Kitchen Sink Accordion</h4>
<div class="accordion"
data-accordion data-multi-expand="true">
<div class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 1
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion 1 content</p>
<a href="#">Link 1</a>
</div>
</div>
<div class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 2
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion 2 content</p>
<a href="#">Link 2</a>
</div>
</div>
<div class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 3
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion3 content</p>
<a href="#">Link 3</a>
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example: The following code demonstrates the Kitchen sink Accordion class along with the disabled variant.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h4>Foundation CSS Kitchen Sink Accordion</h4>
<div class="accordion" data-accordion disabled>
<div class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 1
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion 1 content</p>
<a href="#">Link 1</a>
</div>
</div>
<div class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 2
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion 2 content</p>
<a href="#">Link 2</a>
</div>
</div>
<div class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
GFG Foundation Accordion 3
</a>
<div class="accordion-content" data-tab-content>
<p>Accordion3 content</p>
<a href="#">Link 3</a>
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/kitchen-sink.html#accordion
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...