Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to use toggle() method in jQuery ?

  • Last Updated : 29 Jul, 2021

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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!