---
title: "Use jQuery toggleClass()"  
description: "The jQuery toggleCLass() method is used to add or remove one or more classes from the html selected elements. This method toggles between adding and r"  
author: "Anonymous User"  
published: 2018-01-17  
updated: 2022-12-26  
canonical: https://www.mindstick.com/articles/12771/use-jquery-toggleclass  
category: "jquery"  
tags: ["jquery", "css", "class"]  
reading_time: 1 minute  

---

# Use jQuery toggleClass()

[Introduction](https://yourviews.mindstick.com/view/85450/mesopotamia-introduction-to-an-ancient-civilization):

In this article we will explain what is **toggleCLass()** [method in jQuery](https://www.mindstick.com/forum/33895/how-to-use-append-method-in-jquery) or how to [add or remove](https://www.mindstick.com/forum/160320/how-you-can-check-if-an-element-exists-in-a-set-and-add-or-remove-elements-from-it) [class name](https://www.mindstick.com/forum/12871/how-to-get-class-name) from selected elements on clicking button in jQuery with example.

Description:

The jQuery **toggleCLass()** method is used to add or [remove one](https://answers.mindstick.com/qa/97473/is-it-possible-in-blockchain-to-remove-one-or-more-block-from-the-networks) or more classes from the html selected elements. This method toggles between adding and removing one or more class name. It checks each element for the specified class names. If the class name is already set, it removes and if the class name is not exists, it adds.

Example of jQuery toggleClass() method

<!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Jquery Tutorials</title> <script src='Scripts/jquery-1.8.2.min.js'></script> </head> <body> <script> $([document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).ready([function](https://www.mindstick.com/articles/43970/purchase-suitable-wedding-dresses-for-your-wedding-function) () { $('button').click(function () { $('div').toggleClass('Myclass'); }); }); </script> <div class='div'></div> <div class='div'></div> <button>Click here to add/[remove class](https://www.mindstick.com/forum/34452/how-to-add-and-remove-class-from-an-element-from-jquery)</button> <style> .div { height: 100px; width: 200px; [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp): #77c4fe; margin-bottom: 10px; } .Myclass { background: #f66262; } </style> </body> </html>

Output:

![Use jQuery toggleClass()](https://www.mindstick.com/mindstickarticle/5e1b750e-c2c0-4a4c-bfc5-8c01b275e2ad/images/d1c2a566-c7e5-4f7a-9dc9-d93567658cc6.png)

When we click once on button “Myclass” class name adds in div and click once again “Myclass” class name removed fron div. like shown as below image:

![Use jQuery toggleClass()](https://www.mindstick.com/mindstickarticle/5e1b750e-c2c0-4a4c-bfc5-8c01b275e2ad/images/9e159d41-2f0b-4fcb-96f0-79ec9ca794a6.png)

**Also, Read** [how to show tool tip in html using jquery](https://www.mindstick.com/articles/12942/how-to-show-tool-tip-in-html-using-jquery)

---

Original Source: https://www.mindstick.com/articles/12771/use-jquery-toggleclass

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
