How to use toggle() method in jQuery ?

How to use toggle() method in jQuery ?

Last Updated : 25 Jul, 2024

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=
    "https://code.jquery.com/jquery-3.6.0.min.js"
        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=
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg"
            height='150px' width='150px'>
        <img>
    </div>

    <script>
        $('#btn').click(function () {
            $('#btn').text($('#btn')
                .text() === 'SHOW' ? 'HIDE' : 'SHOW');
            $('div').toggle(2000)
        });
    </script>
</body>

</html>

Output:

How to use toggle() method in jQuery ?

L

lokeshpotta20

Improve

Article Tags :

Similar Reads

How to use hide() method in jQuery ?

The hide() method in jQuery is used for hiding the selected web elements. In this article, we will discuss the hide() method in detail. This method is generally used for effects or animation in jQuery. It also allows us to animate the behavior (transition) of hiding any specific element. Syntax:.hid

jQuery UI | toggle() Method

jQuery UI framework provides toggle() method to display the switch between show or hide functionalities depending on the status of the selected elements and the type of toggle effect chosen by the user. Syntax: (selector).toggle( effectType [, options ] [, duration ] [, complete ] ) Parameters: This

jQuery toggle() Method

The toggle() method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements. show() is run when the element is hidden. hide() is run when the element is visible. Syntax: $(selector).toggle(speed, easing, callback) Parameters: It has three op

jQuery toggleClass() Method

The toggleClass() method is an inbuilt method in jQuery that is used to toggle or change the class attached to the selected element. Syntax: $(selector).toggleClass(class, function, switch)Parameters: This method accepts three parameters as mentioned above and described below: class: It is the requi

jQuery UI | toggleClass Method

The jQuery UI framework classes and methods have definitely improved jQuery toggle() and toggleClass() methods making it more interactive for users and developers. jQuery UI provides in-built toggleClass() method which manages visual toggling effects by adding or removing CSS classes to matched or s