Open In App

jQuery toggleClass() Method

Last Updated : 10 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The toggleClass() method is an inbuilt method in jQuery that is used to toggle or change the class attached to the selected element.

Syntax:

$(selector).toggleClass(class, function, switch)

Parameters:

This method accepts three parameters as mentioned above and described below:

  • class: It is the required parameter and is used to specify the class name that needs to replace.
  • function: It is an optional parameter and is used to specify a function that returns one or more class names. This parameter contains the index position of the element and the class name of the element.
  • switch: It is an optional parameter and is used to specify either true or false. By default it is true.

Return Value: This method returns the selected element with the specified changes made by the toggleClass() method.

The below examples illustrate the toggleClass() method in jQuery:

Example 1:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>The toggleclass Method</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("div").toggleClass("gfg");
            });
        });
    </script>
    <style>
        .gfg {
            font-size: 25px;
            background-color: yellow;
            min-height: 120px;
        }
 
        div {
            width: 200px;
            min-height: 120px;
            background-color: lightgreen;
            padding: 20px;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <!-- click inside this div element to see the change -->
    <div>
        <p>Hello!</p>
        <p>Welcome to GeeksforGeeks.!</p>
        <button>Click Here!</button>
    </div>
</body>
 
</html>


Output:

jquery-39

Example 2:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>toggle class property</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("div").toggleClass(function (n) {
                    n = 1;
                    return "item_" + n;
                });
            });
        });
    </script>
    <style>
        .item_1 {
            color: green;
            font-weight: bold;
            font-size: 20px;
            background-color: white;
            border: 2px solid green;
        }
 
        div {
            text-align: center;
            width: 200px;
            min-height: 100px;
            background-color: lightgreen;
            padding: 20px;
            border: 2px solid black;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <!-- click inside this div element -->
    <div>
        <p>Welcome to GeeksforGeeks!</p>
        <button>Click Here!</button>
    </div>
</body>
 
</html>


Output:

jquery-40



Previous Article
Next Article

Similar Reads

jQuery UI | toggleClass Method
The jQuery UI framework classes and methods have definitely improved jQuery toggle() and toggleClass() methods making it more interactive for users and developers. jQuery UI provides in-built toggleClass() method which manages visual toggling effects by adding or removing CSS classes to matched or selected elements. It helps in changing from one CS
3 min read
p5.js Element toggleClass() Method
The toggleClass() of p5.Element in p5.js is used to toggle the specified class in the element. The toggling of a class means that it would be added or removed depending on the current state. Syntax: toggleClass(class) Parameters: This function accepts a single parameter as mentioned above and described below: class: It is a string that denotes the
2 min read
Angular PrimeNG StyleClass ToggleClass
Angular PrimeNG is an open-source framework for Angular applications. It has a rich set of native UI components that can be used to make attractive and scalable web interfaces. In this article, we will discuss Angular PrimeNG StyleClass ToggleClass. The StyleClass is used to manage CSS classes during entering and leaving animations of a component o
3 min read
jQuery Cheat Sheet – A Basic Guide to jQuery
What is jQuery?jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML &amp; CSS document, Document Object Model (DOM), and JavaScript.
34 min read
jQuery jQuery.fx.interval Property with example
The jQuery.fx.interval property in jQuery is used to modify the number of frames per second at which animations will run and to change the animation firing rate in milliseconds. Its default value is 13ms. Syntax: jQuery.fx.interval = milliseconds;Parameters: This method accepts single parameter milliseconds which is mandatory. It is used to specify
2 min read
jQuery jQuery.fx.off Property
The jQuery.fx.off property in jQuery is used to globally disable/enable all animations. Its default value is false which is used to allow animation to run normally. Syntax: jQuery.fx.off = true|false;Parameter: This event accepts two parameters as mentioned above and described below: true: It is used to specify that the animations should be disable
2 min read
jQuery jQuery.support Property
The jQuery.support property in jQuery contains a collection of properties that are used to represent the different browser features or bugs. Syntax: jQuery.support.propvalueParameters: This property contains a single parameter propvalue: which is required. It is used to specify the function to test for. The tests included are: ajaxboxModelchangeBub
1 min read
jQuery jquery Property
The jquery property is used to return the jQuery version number. Syntax $().jqueryExample: Return the version number. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; h1 { color: green; } &lt;/style&gt; &lt;script src= &quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt; &lt;/script&gt; &lt;script
1 min read
How to append a jQuery object to all paragraphs using jQuery ?
In this article, we will see how to append a jQuery object to all paragraphs using jQuery. Append means we add something to an existing element. The object is used to define a container for an external resource like a page, a picture, a media player, or a plug-in application. Used Methods: ready() Method: This method is used to specify a function t
2 min read
How to insert a jQuery object after all paragraphs using jQuery ?
The task is to insert a jQuery object after all the paragraphs using jQuery. Approach: Create DOM element or jQuery object using &lt;span&gt; tag.Create a paragraph using &lt;p&gt; tag.Create a button using button tag after clicking on which the object will be inserted after paragraph.Write a script that will call a function jQuery.after() which is
1 min read