Add/Remove Classes on the Fly with jQuery

jQuery provides methods that allow you to add and remove classes that are contained in your style sheet. Here's an overview.

The jQuery addClass(), removeClass(), and toggleClass() methods enable you to dynamically add and remove classes on HTML elements. This can be useful when applying multiple style declarations, and it allows you to keep your styles within your style sheet while using jQuery to access them.

The `addClass()` Method

Here's how to use the addClass() method:

And here it is in action:

<!doctype html>
<title>Example</title>
<style>
div {
  background: limegreen;
  color: white;
  padding: 10px;
  margin: 20px;
}
.different {
  border: 5px solid orange;
  background: gold;
  color: black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( "div" ).click( function() {
      $( this ).addClass( "different" );
    });
  });
</script>

<div>
  Click me...
</div>

<div>
  No, click me!
</div>

You can also provide multiple classes separated by a space, like this:

The `removeClass()` Method

The removeClass() enables you to remove a single class, multiple classes, or all classes from each element in the set of matched elements.

Like this:

Working example:

<!doctype html>
<title>Example</title>
<style>
.box {
  border: 5px solid orange;
  background: gold;
  padding: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( "div" ).click( function() {
      $( this ).removeClass( "box" );
    });
  });
</script>

<div class="box">
  Click me...
</div>

Multiple class names can be provided, separated by a space.

The `toggleClass()` Method

The toggleClass() method combines the functionality of addClass() and removeClass() to produce a "toggle" effect where the class is added or removed, depending on whether the class is already attached to the element or not.

For example, a user clicks an element which adds a class to it. When the user clicks again, the class is removed. When they click again, it's added back, and so on.

Here's how to use the toggleClass() method:

And here it is in action. Click the elements multiple times to get the toggle effect:

<!doctype html>
<title>Example</title>
<style>
div {
  background: limegreen;
  color: white;
  padding: 10px;
  margin: 20px;
}
.different {
  border: 5px solid orange;
  background: gold;
  color: black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
  $( function() {
    $( "div" ).click( function() {
      $( this ).toggleClass( "different" );
    });
  });
</script>

<div>
  Click me...
</div>

<div class="different">
  No, click me!
</div>

As with the other methods, multiple class names can be provided, separated by a space.

Add/Remove Classes on the Fly with jQuery

The addClass() Method

The removeClass() Method

The toggleClass() Method

The `addClass()` Method

The `removeClass()` Method

The `toggleClass()` Method