Open In App

How to use toggle() method in jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

The toggle() method is used to oscillate between the properties of CSS while used to produce the animation effect to the elements. The various jQuery effects are hide(), fade(), and slide(). Basically, the toggle() method oscillates between the CSS property display: none if it is present else it gets back to its original state.

For hide(), fade(), and slide() have toggling functions like hideToggle(),fadeToggle(), and slideToggle().

Syntax:

$(selector).toggle(time, callback_function)

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <!-- Including jQuery  -->
    <script src=
        letegrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
    </script>
      
    <style>
        h1 {
            color: #006600;
        }
  
        button {
            color: white;
            background-color: #006600;
            width: 100px;
            height: 30px;
        }
  
        body {
            text-align: center;
        }
  
        div {
            border: 2px solid black;
            border-radius: 10px;
            margin: 10px;
            height: 150px;
            width: 150px;
            position: relative;
            text-align: center;
            display: flex;
            left: 215px;
        }
    </style>
</head>
  
<body>
    <h1>Geeks For Geeks</h1>
  
    <button id="btn"> HIDE </button>
  
    <div id="GFG_IMAGE">
  
        <!-- Image added using img tag 
            with src attribute -->
        <img src=
            height='150px' width='150px'>
        <img>
    </div>
  
    <script>
        $('#btn').click(function () {
            $('#btn').text($('#btn')
                .text() === 'SHOW' ? 'HIDE' : 'SHOW');
            $('div').toggle(2000)
        });
    </script>
</body>
  
</html>


Output:



Last Updated : 29 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads