Open In App

Foundation CSS Accordion Advanced Options

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.

Foundation CSS Accordion is used to display a large amount of information in a very small place inside a container. We can access each of them by switching between the different items. The Accordion Advanced Options contains the various option for the accordion, which includes multi-expanding of the accordion, closing all the accordions at a moment & disabling to access the accordions.

Foundation CSS Accordion Advanced Options:

  • Multi-expand: This helps us to expand multiple panes.
  • All Closed: This helps us to close all the panes.
  • Disabled: This helps us to disable the panes.

Foundation CSS Accordion Advanced Options Attributes: 

  • data-accordion: This attribute enables the accordion options & must be specified before the required attributes.
  • data-multi-expand: This attribute is used to open multiple panes at the same time.
  • data-allow-all-closed: This attribute is used to close all the panes.
  • disabled: This attribute is used to disable the panes.

Syntax:

<ul class="accordion" data-accordion 
           Accordion-Advanced-Options-Attribute" > 
    Content
</ul>

Example 1: The following example demonstrates the Foundation CSS Accordion Advanced Options using the Multi-expand attribute.

HTML




<!DOCTYPE html>
<html>
  
<head>
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
      
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 50px;">
    <center>
        <h2 style="color:green;"
            GeeksforGeeks
        </h2>
        <h3
            Foundation CSS Accordion Advanced Options - Multi-expand
        </h3>
        <ul class="accordion" data-accordion data-multi-expand="true">
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">GFG 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">GFG 2</a>
                <div class="accordion-content" data-tab-content>
                    <p> Computer Science portal </p>
                </div>
            </li>
            <li class="accordion-item" 
                data-accordion-item> 
                <a href="#" class="accordion-title">GFG 3</a>
                <div class="accordion-content" data-tab-content>
                    <p> GeeksforGeeks </p>
                </div>
            </li>
        </ul>
    </center>
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output: 

Foundation CSS Accordion Advanced Options – Multi-expand

Example 2: The following example demonstrates the Foundation CSS Accordion Advanced Options using the All Closed attribute.

HTML




<!DOCTYPE html>
<html>
  
<head>
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
      
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 50px;">
    <center>
        <h2 style="color:green;">
             GeeksforGeeks 
        </h2>
        <h3>
            Foundation CSS Accordion Advanced Options - All Closed 
        </h3>
        <ul class="accordion" 
            data-accordion data-allow-all-closed="true">
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">GFG 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">GFG 2</a>
                <div class="accordion-content" data-tab-content>
                    <p> Computer Science portal </p>
                </div>
            </li>
            <li class="accordion-item" data-accordion-item> 
                <a href="#" class="accordion-title">GFG 3</a>
                <div class="accordion-content" data-tab-content>
                    <p> GeeksforGeeks </p>
                </div>
            </li>
        </ul>
    </center>
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output:

Foundation CSS Accordion Advanced Options – All Closed

Example 3: The following example demonstrates the Foundation CSS Accordion Advanced Options using the Disabled attribute.

HTML




<!DOCTYPE html>
<html>
  
<head>
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
      
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 50px;">
    <center>
        <h2 style="color:green;"
            GeeksforGeeks 
        </h2>
        <h3>
            Foundation CSS Accordion Advanced Options - Disabled 
        </h3>
        <ul class="accordion" data-accordion disabled>
            <li class="accordion-item" data-accordion-item>
                <a href="#" class="accordion-title">GFG 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">GFG 2 </a>
                <div class="accordion-content" data-tab-content>
                    <p> Computer Science portal </p>
                </div>
            </li>
            <li class="accordion-item" 
                data-accordion-item> 
                <a href="#" class="accordion-title">GFG 3</a>
                <div class="accordion-content" data-tab-content>
                    <p> GeeksforGeeks </p>
                </div>
            </li>
        </ul>
    </center>
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output:

Foundation CSS Accordion Advanced Options – Disabled

Reference: https://get.foundation/sites/docs/accordion.html#advanced-options



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