1

Foundation CSS Kitchen Sink Toggler

 1 month ago
source link: https://www.geeksforgeeks.org/foundation-css-kitchen-sink-toggler/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Foundation CSS Kitchen Sink Toggler

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.

<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<!-- Compressed JavaScript -->
<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:

20220309232056.gif

Example 2: The following code demonstrates the Foundation CSS Kitchen Sink Toggler with icons and images.

<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<!-- Compressed JavaScript -->
<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:

20220309233745.gif

Reference: https://get.foundation/sites/docs/kitchen-sink.html#toggler

“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank

With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.

So get ready for salary hike only with our Full Stack Development Course.

Last Updated : 22 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK