In this article we will explain what is toggleCLass() method in jQuery or how to once click add class name from html selected elements or how to remove class name once clicking from selected elements in jQuery with example.


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 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

Let’s see, Example of jQuery toggleCLass() method:

<html xmlns="">
    <title>Example of jQuery toggleClass method</title>
    <script type="text/javascript" src=""></script>
        $(document).ready(function () {
            $("button").click(function () {
    <div class="div" id="maindiv"></div>    
    <button>Click here to add/remove class</button>
        .div {
            height: 100px;
            width: 200px;
            background: #77c4fe;
            margin-bottom: 10px;
        .Myclass {
            background: #f66262;
            height: 150px;
            width: 300px;

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like