Skip to content
Related Articles

Related Articles

Improve Article
How to Double click on a div element to toggle background color in jQuery ?
  • Last Updated : 25 Mar, 2021

In this article, we will see how to make a double click event on a paragraph element to toggle background color in jQuery. To toggle the background color of a div element on double-click, toggleClass() method is used. The toggleClass() method is used to toggle or change the class which attached with selected element.

Syntax:

$(selector).dblclick(function() {
    $(selector).toggleClass("element");
})

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to Double click on a paragraph to
        toggle background color in jQuery?
    </title>
  
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            var block = $(".main");
            block.dblclick(function () {
                block.toggleClass("GFG");
            });
        });
    </script>
  
    <style>
        body {
            text-align: center;
        }
  
        .main {
            width: 350px;
            height: 200px;
            border: 2px solid black;
        }
  
        .GFG {
            background: green;
            color: white;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <h1>GeeksforGeeks</h1>
  
        <h3>
            How to Double click on a paragraph to
            <br>toggle background color in jQuery?
        </h3>
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :