Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to use toggle() method in jQuery ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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().


$(selector).toggle(time, callback_function)



<!DOCTYPE html>
<html lang="en">
    <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=
        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;
    <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'>
        $('#btn').click(function () {
                .text() === 'SHOW' ? 'HIDE' : 'SHOW');


My Personal Notes arrow_drop_up
Last Updated : 29 Jul, 2021
Like Article
Save Article
Similar Reads
Related Tutorials