Foundation CSS Toggler

Toggler облегчает переключение любого элемента или анимацию любого элемента одним щелчком мыши. Мы можем переключать любой класс, указав атрибут data-toggler. Мы также можем сделать закрываемый элемент, используя атрибут data-closable.

Атрибуты переключателя Foundation CSS:

data-toggler: класс, который мы хотим переключить.
data-toggle: этот атрибут принимает идентификатор цели в качестве значения атрибута.

Синтаксис:

<p>
    <a data-toggle="exampleToggle">Toggle</a>
</p>
<ul class="menu" id="exampleToggle" data-toggler=".expanded">
  Content
</ul>

Пример 1. Этот пример иллюстрирует класс Toggler в Foundation CSS.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Foundation CSS Toggler</title>

    <link rel="stylesheet" href=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"

          crossorigin="anonymous">

    <script src=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"

            crossorigin="anonymous">

    </script>

    <link rel="stylesheet" href=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">

    </script>

    <script src=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"

            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>

Пример 2. В этом примере класс выноски реализуется с атрибутом закрытия данных для закрытия панели в Foundation CSS.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Foundation CSS Toggler</title>

    <link rel="stylesheet" href=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"

          crossorigin="anonymous">

    <script src=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"

            crossorigin="anonymous">

    </script>

    <link rel="stylesheet" href=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">

    </script>

    <script src=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"

            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=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"

             alt="GFG_logo">

    </div>

    <script>

        $(document).ready(function() {

            $(document).foundation();

        })

    </script>

</body>

</html>