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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </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>