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.
Accordions are the elements that help us to organize and navigate to different sections in a single container. These are used to switch between the sections in the container. We can store a large amount of data in a structured manner and can be easily accessible. In this article, we will discuss the basics of the accordion.
Foundation CSS Accordion Basics Classes:
- accordion: It is used to create the container.
- accordion-item: It is used to create the accordion items.
- accordion-title: It is used to give the title to the accordion.
- accordion-content: It is used to put some content inside the accordion item.
Syntax:
<ul class="accordion" data-accordion>....</ul>
Example 1: The following code demonstrates the Accordion Basics with some content.
<!DOCTYPE html> <html>
<head>
<!-- Compressed CSS -->
<link
rel="stylesheet"
crossorigin="anonymous"
/>
<!-- Compressed JavaScript -->
<script </script>
<script
crossorigin="anonymous"
></script>
</head>
<body>
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Foundation CSS Accordion Basics</h3>
</center>
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 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">GeeksforGeeks 2</a>
<div class="accordion-content" data-tab-content>
<p>
It contains well written, well thought and
well explained computer science and
programming articles,
</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 3</a>
<div class="accordion-content" data-tab-content>
<p>
Gfg is the only reason to fall in love
with data structure and programming
</p>
</div>
</li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Accordion Basics with links and images.
<!DOCTYPE html> <html>
<head>
<!-- Compressed CSS -->
<link
rel="stylesheet"
crossorigin="anonymous"
/>
<!-- Compressed JavaScript -->
<script </script>
<script
crossorigin="anonymous"
></script>
</head>
<body>
<center>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Foundation CSS Accordion Basics</h3>
</center>
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 1</a>
<div class="accordion-content" data-tab-content>
<p>A Computer Science portal for geeks.</p>
<a href="#">GeeksforGeeks website link</a>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 2</a>
<div class="accordion-content" data-tab-content>
<strong>GeeksforGeeks image</strong>
<img src=
alt=""
/>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">GeeksforGeeks 3</a>
<div class="accordion-content" data-tab-content>
<p>
Gfg is the only reason to fall in love with data structure and
programming
</p>
<img src=
alt=""
/>
<a href="">Link</a>
</div>
</li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Reference link: https://get.foundation/sites/docs/accordion.html#basics