Foundation CSS JavaScript Configuring Plugins
Last Updated :
13 Jul, 2022
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:
<div data-accordion data-slide-speed="500"
data-multi-expand="true"></div>
<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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
</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
Similar Reads
Foundation CSS JavaScript using Plugins
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, M
3 min read
Foundation CSS JavaScript Utilities
Foundation JavaScript Utilities is a collection of tools that can be used to enhance the functionality of your Foundation website. To use Foundation JavaScript Utilities, you first need to include the foundation.js file in your website. Once you have done this, you can use the various utilities by c
4 min read
Foundation CSS JavaScript
A 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. The framewor
4 min read
Foundation CSS JavaScript Programmatic Use
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
4 min read
Foundation CSS JavaScript Throttle Utility
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
2 min read
Foundation CSS JavaScript Events
Foundation CSS JavaScript is a set of JavaScript tools and plugins that can be used to add interactivity and functionality to your website. It includes a variety of plugins for things like modals, alerts, and accordions, as well as utility functions for handling events and working with the DOM. Foun
3 min read
Foundation CSS JavaScript Miscellaneous Utilities
Foundation CSS is a responsive front-end framework for building web applications. It includes a set of CSS styles and JavaScript functions that can be used to create a responsive layout and add interactivity to a website. Foundation CSS JavaScript miscellaneous utilities: Foundation.GetYoDigits([num
4 min read
JavaScript Function() Constructor
The JavaScript Function() constructor is used to create new function objects dynamically. By using the Function() constructor with the new operator, developers can define functions on the fly, passing the function body as a string. This allows for greater flexibility in situations where functions ne
2 min read
Why learn JavaScript Foundations ?
JavaScript is like a cornerstone in the world of programming languages. It's famous for being adaptable and everywhere. No matter if you're into making websites, or mobile apps, or diving into server stuff, understanding the basics of JavaScript is super important. Let's talk about why it's so cruci
4 min read
JavaScript Course Interaction With User
Javascript allows us the privilege to which we can interact with the user and respond accordingly. It includes several user-interface functions which help in the interaction. Let's take a look at them one by one. JavaScript Window alert() Method : It simply creates an alert box that may or may not h
2 min read