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.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <!-- Compressed CSS -->
    <link
      rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
      crossorigin="anonymous"
    /> 
  
    <!-- Compressed JavaScript -->
    <script 
src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script
src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"
      crossorigin="anonymous"
    ></script> 
  </head> 
  <body> 
    <center> 
      <h2 style="color: green">w3wiki</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">w3wiki 1</a> 
  
        <div class="accordion-content" data-tab-content> 
          <p>A Computer Science portal for Beginner.</p> 
        </div> 
      </li> 
      <li class="accordion-item" data-accordion-item> 
        <a href="#" class="accordion-title">w3wiki 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">w3wiki 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"
href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
      crossorigin="anonymous"
    /> 
  
    <!-- Compressed JavaScript -->
    <script 
src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script
src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"
      crossorigin="anonymous"
    ></script> 
  </head> 
  <body> 
    <center> 
      <h2 style="color: green">w3wiki</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">w3wiki 1</a> 
  
        <div class="accordion-content" data-tab-content> 
          <p>A Computer Science portal for Beginner.</p> 
          <a href="#">w3wiki website link</a> 
        </div> 
      </li> 
      <li class="accordion-item" data-accordion-item> 
        <a href="#" class="accordion-title">w3wiki 2</a> 
        <div class="accordion-content" data-tab-content> 
          <strong>w3wiki image</strong> 
          <img src= 
 "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"
            alt=""
          /> 
        </div> 
      </li> 
      <li class="accordion-item" data-accordion-item> 
        <a href="#" class="accordion-title">w3wiki 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= 
 "https://media.w3wiki.net/wp-content/cdn-uploads/20200617163105/gfg-logo.png"
            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

HTML

HTML

Contact Us