Skip to content
Related Articles

Related Articles

Foundation CSS Toggler

View Discussion
Improve Article
Save Article
  • Last Updated : 25 Feb, 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. 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#


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!