Skip to content
Related Articles

Related Articles

Foundation CSS JavaScript Configuring Plugins

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jul, 2022
View Discussion
Improve Article
Save Article

Foundation CSS is an open-source front-end framework that is used to create a beautiful responsive website, apps, or email quickly and easily. ZURB published it in September of that year. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, make use of it. This framework, which resembles SaaS, is built on the Bootstrap framework. It is more intricate, flexible, and individualized. Working with module bundlers is also a breeze because of its command-line interface. Email framework creates HTML emails that are viewable on all devices and are mobile-friendly. With Foundation for Apps, you can make fully responsive web applications.

In this article, we will learn to configure plugins for Foundation CSS. All the plugins have configuration settings that customize their work. For example, fast sliding of accordion in the up and down direction. Some code examples are given below for easy understanding.

Syntax:

  • Using data attribute:
<div data-accordion data-slide-speed="500" 
    data-multi-expand="true"></div>
  • Using data options:
<div data-accordion data-options=
    "slideSpeed: 500; multiExpand: true;"></div>
  • Setting defaults property globally:
Foundation.Accordion.defaults.slideSpeed = 500;
Foundation.Accordion.defaults.multiExpand = true;

Note: For the above syntaxes, we have taken the example of an accordion HTML element

Example 1: In the following example, the accordion is demonstrated by using the accordion class along with the data-accordion attribute with data-slide-speed=”800″ data-multi-expand=”true” data options.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0"> 
       <link rel="stylesheet" href=
    
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>    
    <style>
       body {
         margin-left:10px;
         margin-right:10px;
       }
    </style>
</head>
<body>
    <h1 style="color:green">
      GeeksforGeeks
      </h1>
    <h3>
      Foundation CSS JavaScript Configuring Plugins
      </h3>
    <div id="divID">
        <ul class="accordion" 
            data-accordion data-slide-speed="800" 
            data-multi-expand="true">
            <li class="accordion-item" data-accordion-item>
                <a href="#" 
                   class="accordion-title">Accordion 1</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 1</p>
                </div>
            </li>
        
            <li class="accordion-item" data-accordion-item>
                <a href="#"
                   class="accordion-title">Accordion 2</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 2</p>
                </div>
            </li>
        
            <li class="accordion-item" data-accordion-item>
                <a href="#" 
                   class="accordion-title">Accordion 3</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 3</p>
                </div>
            </li>
        
            <li class="accordion-item" data-accordion-item>
                <a href="#" 
                   class="accordion-title">Accordion 4</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 4</p>
                </div>
            </li>      
        </ul>        
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output:

 

Example 2: The following code shows the setting options with JavaScript involve passing an object into the constructor function. Refer to the script part. The options passed to plugins through JavaScript will take the highest precedence, and will overwrite any default values. In the following example, “slideSpeed: 500″ will take precedence over data-slide-speed=”100″ with other data options.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
  
       <link rel="stylesheet" href=
    
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>    
    <style>
       body {
         margin-left:10px;
         margin-right:10px;
       }
    </style>
</head>
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>
        Foundation CSS JavaScript Configuring Plugins
    </h3>
    <div id="divID">
        <ul class="accordion" 
            id="ulid"
            data-accordion data-slide-speed="100">
            <li class="accordion-item" 
                data-accordion-item>
                <a href="#" 
                   class="accordion-title">Accordion 1</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 1</p>
                </div>
            </li>
        
            <li class="accordion-item" data-accordion-item>
                <a href="#"
                   class="accordion-title">Accordion 2</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 2</p>
                </div>
            </li>
        
            <li class="accordion-item" data-accordion-item>
                <a href="#" 
                   class="accordion-title">Accordion 3</a>
                <div class="accordion-content" data-tab-content>
                    <p>This is the Content of Accordion 3</p>
                </div>
            </li>
        </ul>        
    </div>
    <script>
        $(document).ready(function () {
            var options = {slideSpeed: 500,
                           multiExpand: false, 
                           allowAllClosed: true};
            var accordion = new Foundation.Accordion($('#ulid'), options);            
            $(document).foundation(options,accordion);
        })       
    </script>
</body>
</html>


Output:

 

Reference: https://get.foundation/sites/docs/javascript.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!