Foundation CSS 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. 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.

Output:

👁 Image

Example 2: This example implements the callout class with a data-closable attribute to close the panel in Foundation CSS.

Output:

👁 Image

Reference link: https://get.foundation/sites/docs/toggler.html