Foundation CSS Accordion Basics
Last Updated :
25 Feb, 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.
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.
HTML
<!DOCTYPE html>
< html >
< head >
< link
rel = "stylesheet"
crossorigin = "anonymous"
/>
< 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.
HTML
<!DOCTYPE html>
< html >
< head >
< link
rel = "stylesheet"
crossorigin = "anonymous"
/>
< 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
Share your thoughts in the comments
Please Login to comment...