Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery Basic

jQuery Ajax Events

jQuery Ajax Methods

jQuery Keyboard Events

jQuery Keyboard Methods

jQuery Form Events

jQuery Form Methods

jQuery Mouse Event

jQuery Mouse Methods

jQuery Event Object

jQuery Fading

jQuery Document Loading

jQuery Traversing

jQuery Utilities

jQuery Property

jQuery HTML

jQuery CSS

jQuery Miscellaneous

jQuery .toggleClass() Method

Posted in jQuery Tutorial
Updated on May 20, 2024
By Mari Selvan
👁️ 45 - Views
⏳ 4 mins
💬 1 Comment
jQuery .toggleClass() Method

Photo Credit to CodeToFun

🙋 Introduction

jQuery offers a myriad of methods to manipulate the appearance and behavior of HTML elements dynamically. One such versatile method is .toggleClass(), which allows you to add or remove one or more classes from selected elements with ease. Understanding how to leverage this method effectively can significantly enhance your ability to create interactive and dynamic web pages.

In this comprehensive guide, we'll explore the intricacies of the jQuery .toggleClass() method, providing clear examples to illustrate its functionality.

🧠 Understanding .toggleClass() Method

The .toggleClass() method is designed to toggle the presence of one or more CSS classes on selected elements. It simplifies the process of adding or removing classes based on certain conditions, providing a convenient way to control the styling and behavior of elements dynamically.

💡 Syntax

The syntax for the .toggleClass() method is straightforward:

syntax.js
Copied
Copy To Clipboard
$(selector).toggleClass(className, switch)
  • selector: Specifies the elements to which the class should be added or removed.
  • className: The name of the class(es) to toggle.
  • switch: A boolean value indicating whether the class should be added (true) or removed (false). If omitted, the class will be toggled, i.e., added if it's not present, and removed if it is present.

📝 Example

  1. Toggling a Class on Click:

    Suppose you have a button that, when clicked, should toggle a specific class on a paragraph. You can achieve this using the .toggleClass() method as follows:

    index.html
    Copied
    Copy To Clipboard
    <button id="toggleButton">Toggle Class</button>
    <p>This is a paragraph.</p>
    example.js
    Copied
    Copy To Clipboard
    $("#toggleButton").click(function() {
      $("p").toggleClass("highlight");
    });

    This will add the class highlight to the paragraph when the button is clicked, and remove it if it's already present.

  2. Conditional Toggling Based on State:

    You can also toggle a class based on certain conditions. For instance, let's toggle a class based on whether a checkbox is checked:

    index.html
    Copied
    Copy To Clipboard
    <input type="checkbox" id="checkbox"> Toggle Class
    <p>This is a paragraph.</p>
    example.js
    Copied
    Copy To Clipboard
    $("#checkbox").change(function() {
      $("p").toggleClass("highlight", $(this).is(":checked"));
    });

    This will add the class highlight to the paragraph when the checkbox is checked, and remove it when unchecked.

  3. Toggling Multiple Classes:

    The .toggleClass() method can toggle multiple classes simultaneously by specifying them as space-separated strings. For example:

    index.html
    Copied
    Copy To Clipboard
    <button id="toggleButton">Toggle Classes</button>
    <p>This is a paragraph.</p>
    example.js
    Copied
    Copy To Clipboard
    $("#toggleButton").click(function() {
      $("p").toggleClass("highlight bold italic");
    });

    This will toggle the classes highlight, bold, and italic on the paragraph each time the button is clicked.

🎉 Conclusion

The jQuery .toggleClass() method is a powerful tool for dynamically adding or removing classes from HTML elements. Whether you want to toggle classes based on user interactions, state changes, or specific conditions, this method provides a convenient and efficient solution.

By mastering its usage, you can enhance the interactivity and visual appeal of your web pages effortlessly.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy