How to Double click on a div element to toggle background color in jQuery ?
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 >w3wiki</ h1 > < h3 > How to Double click on a paragraph to < br >toggle background color in jQuery? </ h3 > </ div > </ body > </ html > |
Output: