Foundation CSS Kitchen Sink Toggler
Last Updated :
22 Mar, 2022
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. Kitchen Sink has the foundation elements to work well in our websites and applications. Kitchen Sink Toggler is used to toggle or animate any element when we click it. We use data-toggle and data-toggler attributes to toggle the element with the help of id. In this article, we will discuss Kitchen Sink Toggler in Foundation CSS.
Foundation CSS Kitchen Sink Toggler Attributes:
- data-toggle: This attribute has the value as the element’s id that we want to toggle.
- data-toggler: This attribute is used to toggle the given class.
Syntax:
<p><a data-toggle="toggle"> ... </a></p>
<ul class="menu" id="toggle" data-toggler=".expanded">
....
</ul>
Example 1: The following code demonstrates the Foundation CSS Kitchen Sink Toggler.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Kitchen Sink Toggler</h3>
</center>
<p>
<a data-toggle="toggleThis">Toggle</a>
</p>
<ul class="menu" id="toggleThis" data-toggler=".expanded">
<li>
<a href="#"> GFG1</a>
</li>
<li>
<a href="#"> GFG2</a>
</li>
<li>
<a href="#"> GFG3</a>
</li>
<li>
<a href="#"> GFG4</a>
</li>
<li>
<a href="#"> GFG5</a>
</li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Foundation CSS Kitchen Sink Toggler with icons and images.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
rel="stylesheet">
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Kitchen Sink Toggler</h3>
</center>
<p>
<a data-toggle="toggle1">Toggle</a>
</p>
<ul class="menu" id="toggle1" data-toggler=".expanded">
<li>
<a href="#">
<i class="fa fa-pencil-square"></i>
<span>GFG1</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-pencil-square"></i>
<span>GFG2</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-pencil-square"></i>
<span>GFG3</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-pencil-square"></i>
<span>GFG4</span>
</a>
</li>
</ul>
<p>
<a data-toggle="toggle2">Toggle This</a>
</p>
<ul class="menu" id="toggle2" data-toggler=".expanded">
<li>
<img src=
</li>
<li>
<img src=
</li>
<li>
<img src=
</li>
<li>
<img src=
</li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/kitchen-sink.html#toggler
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...