jQuery CSS Classes: addClass, removeClass, toggleClass

The best way to change the style of an element is to change its CSS class. You write the style in your CSS file, and jQuery only switches the class. The code stays clean.

Method	What it does
.addClass('name')	Adds one or more classes
.removeClass('name')	Removes one or more classes (without an argument it removes all)
.toggleClass('name')	Adds the class if it is missing, removes it if it is there
.hasClass('name')	Returns true or false

<p id="msg" class="note">Message</p>

$('#msg').addClass('big red');
console.log($('#msg').attr('class'));

$('#msg').removeClass('note');
console.log($('#msg').attr('class'));

console.log($('#msg').hasClass('red'));
console.log($('#msg').hasClass('note'));

toggleClass()

<button id="btn">Dark mode</button>
<div id="page">Page</div>

$('#btn').on('click', function () {
  $('#page').toggleClass('dark');
});

$('#btn').click();
console.log($('#page').hasClass('dark'));
$('#btn').click();
console.log($('#page').hasClass('dark'));

You can also give a second argument: toggleClass('dark', true) always adds, and toggleClass('dark', false) always removes.

Switch between two classes

<p id="status" class="off">Status</p>

$('#status').toggleClass('on off');
console.log($('#status').attr('class'));
$('#status').toggleClass('on off');
console.log($('#status').attr('class'));

Active menu item

<ul id="menu">
  <li class="active">Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

$('#menu li').on('click', function () {
  $(this).addClass('active').siblings().removeClass('active');
});

$('#menu li').eq(2).click();

A very common pattern: add the class to the clicked item, and remove it from its siblings.

Use a function

<ul><li>A</li><li>B</li><li>C</li></ul>

$('li').addClass(function (index) {
  return index % 2 === 0 ? 'even' : 'odd';
});

The CSS for the classes

.red  { color: red; }
.big  { font-size: 24px; }
.dark { background: #222; color: #fff; }
.active { font-weight: bold; }

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.