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 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.

Output:

👁 Image

Example 2:  The following code demonstrates the Accordion Basics with links and images.

Output:

👁 Image

Reference link: https://get.foundation/sites/docs/accordion.html#basics