jQuery UI | toggle() Method

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:

jQuery UI | toggle() Method

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

Explain slide toggle method in jQuery

The slideToggle() is a method in jQuery which is an alternative for two separate methods namely slideUp() and slideDown(). This actually plays with the CSS display property of the element and provides a slight animation to it. If the element has a "display:none", the slideDown() functionality gets t

jQuery UI Button option() Method

jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button option() method is used to set or return the value currently associated with the specified element. Syntax: opti

jQuery UI Accordion option() Method

jQuery UI option() method is used to check if a method returns a boolean value representing if an object option exist or not. Syntax: var a = $( ".selector" ).accordion( "option" )Parameters: This method does not accept any parameters. Return values: This method returns an object value Approach: Fir

jQuery | slideToggle() Method

The slideToggle() Method in jQuery is used to show the hidden elements or hide the visible elements respectively i.e. it toggles between the slideUp() and slideDown() methods. slideDown() is run when the element is hidden. slideUp() is run when the element is visible. Syntax: $(selector).slideToggle

jQuery Mobile Toolbar toggle() Method

jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops. In this article, we will use jQuery Mobile Toolbar toggle() method to toggle the