jQuery toggleClass example

Toggle class name on click in jQuery

by nickolas_hook

HTML

<div id="banner-message">
  <p id="feedback" class="">Click a button</p>
  
  <button onClick="$feedback.addClass('A');">+ A</button> <button onClick="$feedback.removeClass('A');">- A</button><br />
  <button onClick="$feedback.addClass('B');">+ B</button> <button onClick="$feedback.removeClass('B');">- B</button><br />
  <button onClick="$feedback.addClass('C');">+ C</button> <button onClick="$feedback.removeClass('C');">- C</button><br />

  <p id="log"></p>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

#log {
  white-space: pre-wrap;
  font-size: small;
}

JavaScript

// find elements
var $feedback = $('#feedback');
var $log = $('#log');

// handle any changes to the element's classes
$feedback.on('classChanged', function(event) {
	$feedback.text('Classes: ' + $feedback.attr('class'));
});
// handle addition of specific classes
$feedback.on('classAdded', function(event, className) {
	$log.text($log.text() + '\n' + className + ' was added');
});
// handle removal of specific classes
$feedback.on('classRemoved', function(event, className) {
	$log.text($log.text() + '\n' + className + ' was removed');
});


/*** addClass & removeClass extensions ***/
(function( func ) {
    $.fn.addClass = function(n) { // replace the existing function on $.fn
        this.each(function(i) { // for each element in the collection
            var $this = $(this); // 'this' is DOM element in this context
            var prevClasses = this.getAttribute('class'); // note its original classes
            var classNames = $.isFunction(n) ? n(i, prevClasses) : n.toString(); // retain function-type argument support
            $.each(classNames.split(/\s+/), function(index, className) { // allow for multiple classes being added
                if( !$this.hasClass(className) ) { // only when the class is not already present
                    func.call( $this, className ); // invoke the original function to add the class
                    $this.trigger('classAdded', className); // trigger a classAdded event
                }
            });
            if( prevClasses != this.getAttribute('class') ) $this.trigger('classChanged'); // trigger the classChanged event
        });
        return this; // retain jQuery chainability
    }
})($.fn.addClass); // pass the original function as an argument

(function( func ) {
    $.fn.removeClass = function(n) {
        this.each(function(i) {
            var $this = $(this);
            var prevClasses = this.getAttribute('class');
            var classNames = $.isFunction(n) ? n(i, prevClasses) : n.toString();
  ...