JQuery add or remove class using addClass, removeClass and toggleClass methods

802 views 1 year ago Javascript

Sometimes you need to change diplay property or behaviour when event occurs like click or hover on specific element. For that purpose, you may direct change property or behaviour using Javascript or JQuery which is not option and makes code length. The better option is to create class with your required CSS and add or remove class with event.

You can add or remove class on event using vanilla Javascript or JQuery. JQuery provides simple method to add or remove class from the element.

In this article, we will use JQuery addClass, removeClass and toggleClass method with example to add or remove class from the element. For the simplicity of code, we will trigger this method on click button.

addClass method

The addClass method add one or more class to the specific element.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery addClass method</title>
    <style type="text/css">
        .red {
            color: red;
        }
        .italic {
            font-style: italic;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>This is text.</p>
    <button>View</button>
    <script type="text/javascript">
        $('button').click(function() {
            $('p').addClass('red italic');
        });
    </script>
</body>
</html>

removeClass method

removeClass method removes one or multiple class from the element matched from the parameter. If no parameter specified, all class from the element will be removed.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery removeClass method</title>
    <style type="text/css">
        .red {
            color: red;
        }
        .italic {
            font-style: italic;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p class="red italic">This is text.</p>
    <button>View</button>
    <script type="text/javascript">
        $('button').click(function() {
            $('p').removeClass('red italic');
        });
    </script>
</body>
</html>

toggleClass method

toggleClass method checks for toggles one or more classes from the element. If the class already exists, toggleClass removes it and if the class not exists, toggleClass will add the class. toggleClass is useful when you want to toggle between show and hide any element.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery toggleClass method</title>
    <style type="text/css">
        .red {
            color: red;
        }
        .italic {
            font-style: italic;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p class="red">This is text.</p>
    <button>View</button>
    <script type="text/javascript">
        $('button').click(function() {
            $('p').toggleClass('red italic');
        });
    </script>
</body>
</html>

This way, you can manipulate class from the element using JQuery. I hope you liked this article and help you on your work.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]