Mastering jQuery toggleClass(): 5 Practical Examples for Dynamic Styling

by

The toggleClass() method in jQuery is used to toggle (add or remove) one or more classes from the selected elements. If the specified class is present, it removes it; if not, it adds it. This method is useful for dynamically changing styles based on user interaction.

 

$(selector).toggleClass(className, [switch])

className: A string containing one or more class names to toggle.

switch (optional): A Boolean value (true to add the class, false to remove it).

Examples

Example 1: Basic toggleClass()

Toggles a class on a button click

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toggleClass Example 1</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>

<p id="text">Click the button to toggle the highlight class.</p>
<button id="btn">Toggle Class</button>

<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            $("#text").toggleClass("highlight");
        });
    });
</script>

</body>
</html>

Explanation:

  • When the button is clicked, the highlight class is toggled on the <p> element.
  • If the class is not present, it is added.
  • If already present, it is removed.

Example 2: Using toggleClass() with Multiple Classes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toggleClass Example 2</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .red { color: red; }
        .bold { font-weight: bold; }
    </style>
</head>
<body>

<p id="text">Click the button to toggle multiple classes.</p>
<button id="btn">Toggle Multiple Classes</button>

<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            $("#text").toggleClass("red bold");
        });
    });
</script>

</body>
</html>

Explanation:

  • The toggleClass() method is used with multiple classes (red and bold).
  • Clicking the button adds or removes both classes together.

Example 3: Using toggleClass() with a Condition (Boolean)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toggleClass Example 3</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .large-text {
            font-size: 24px;
        }
    </style>
</head>
<body>

<p id="text">Click the buttons to add or remove the class.</p>
<button id="add">Add Class</button>
<button id="remove">Remove Class</button>

<script>
    $(document).ready(function(){
        $("#add").click(function(){
            $("#text").toggleClass("large-text", true); // Always adds class
        });

        $("#remove").click(function(){
            $("#text").toggleClass("large-text", false); // Always removes class
        });
    });
</script>

</body>
</html>

 

Explanation:

  • If true is passed, the class is always added.
  • If false is passed, the class is always removed.
  • This ensures no toggling, just explicit addition or removal.

Example 4: Using toggleClass() on Multiple Elements

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toggleClass Example 4</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .selected {
            background-color: lightblue;
        }
    </style>
</head>
<body>

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<script>
    $(document).ready(function(){
        $("li").click(function(){
            $(this).toggleClass("selected");
        });
    });
</script>

</body>
</html>

Explanation:

  • Clicking on any <li> item will toggle the selected class for that specific item.
  • Each <li> works independently.

Example 5: ToggleClass() for Dark Mode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toggleClass Example 5</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            transition: background 0.3s, color 0.3s;
        }
        .dark-mode {
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>

<button id="toggle">Toggle Dark Mode</button>

<script>
    $(document).ready(function(){
        $("#toggle").click(function(){
            $("body").toggleClass("dark-mode");
        });
    });
</script>

</body>
</html>

Explanation:

  • Clicking the button toggles a “dark mode” effect by changing background and text color.

Summary

Example Description
Example 1 Basic toggleClass() usage
Example 2 Toggling multiple classes at once
Example 3 Using toggleClass() with a Boolean condition
Example 4 Applying toggleClass() to multiple elements
Example 5 Implementing a dark mode toggle
Print Friendly, PDF & Email
Post Views: 14

Leave a Comment