Open In App

Foundation CSS Accordion Basics

Improve
Improve
Like Article
Like
Save
Share
Report

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

HTML




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



Last Updated : 25 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads