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 framework is based on bootstrap, which is similar to SaaS. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Toggler facilitates toggling any element or to animate any element, with a click. We can toggle any class by specifying the data-toggler attribute. We can also make a closable element using a data-closable attribute.
Foundation CSS Toggler Attributes:
- data-toggler: The class that we want to toggle.
- data-toggle: This attribute takes the id of the target as the value of the attribute.
Syntax:
<p>
<a data-toggle="exampleToggle">Toggle</a>
</p>
<ul class="menu" id="exampleToggle" data-toggler=".expanded">
Content
</ul>
Example 1: This example illustrates the Toggler class in Foundation CSS.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Foundation CSS Toggler</ title >
< link rel = "stylesheet" href =
crossorigin = "anonymous" >
< script src =
crossorigin = "anonymous" >
</ script >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
integrity =
"sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >Foundation CSS Toggler</ h3 >
< p >
< a data-toggle = "toggleExample" >Toggle!</ a >
</ p >
< ul class = "menu"
id = "toggleExample"
data-toggler = ".expanded" >
< li >
< a href = "#" >Menu 1</ a >
</ li >
< li >
< a href = "#" >Menu 2</ a >
</ li >
< li >
< a href = "#" >Menu 3</ a >
</ li >
< li >
< a href = "#" >Menu 4</ a >
</ li >
< li >
< a href = "#" >Menu 5</ a >
</ li >
</ ul >
< script >
$(document).ready(function() {
$(document).foundation();
})
</ script >
</ body >
</ html >
|
Output:
Foundation CSS Toggler
Example 2: This example implements the callout class with a data-closable attribute to close the panel in Foundation CSS.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Foundation CSS Toggler</ title >
< link rel = "stylesheet" href =
crossorigin = "anonymous" >
< script src =
crossorigin = "anonymous" >
</ script >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
integrity =
"sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw=="
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >Foundation CSS Toggler</ h3 >
< strong >Close an element:</ strong >
< div class = "callout" data-closable>
< button class = "close-button" data-close>×</ button >
< p >
A Computer Science portal for geeks.
It contains well written, well thought
and well-explained computer science
and programming articles
</ p >
</ div >
< div class = "callout" data-closable>
< button class = "close-button" data-close>×</ button >
< img src =
alt = "GFG_logo" >
</ div >
< script >
$(document).ready(function() {
$(document).foundation();
})
</ script >
</ body >
</ html >
|
Output:
Foundation CSS Toggler
Reference link: https://get.foundation/sites/docs/toggler.html#
Last Updated :
25 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...