Open In App

Foundation CSS Toggler

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads