Toggle Class

Without JQuery

by Nik Shevchenko

HTML

<div class="one">R A D I O H E A D</div>

<div class="two">Thom Yorke</div>

<a href="https://toddmotto.com/creating-jquery-style-functions-in-javascript-hasclass-addclass-removeclass-toggleclass/">#1</a>
<a href="http://youmightnotneedjquery.com/">#2</a>

CSS

.one {
  color: #000;
  height: 50px;
  cursor: pointer;
  text-align: center;
  margin-top: 50px;
}

.two {
  text-align: center;
  cursor: pointer;
  margin-bottom: 200px;
}

.red {
  color: red;
}

a {
  color: green;
  text-decoration: none;
  margin-right: 30px;
}

JavaScript

function hasClass(elem, className) {
  return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}

function addClass(o, c) {
  var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g")
  if (re.test(o.className)) return
  o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "")
}

function removeClass(o, c) {
  var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g")
  o.className = o.className.replace(re, "$1").replace(/\s+/g, " ").replace(/(^ | $)/g, "")
}

var oneClick = document.getElementsByClassName('one')[0];

oneClick.addEventListener('click', function(event) {
  if (hasClass(oneClick, 'red') === true) {
    removeClass(oneClick, 'red');
  } else {
    addClass(oneClick, 'red');
  }
});

// #2

el = document.getElementsByClassName('two')[0];
className = 'red';

el.addEventListener('click', function(event) {
  if (el.classList) {
    el.classList.toggle(className);
  } else {
    var classes = el.className.split(' ');
    var existingIndex = classes.indexOf(className);

    if (existingIndex >= 0)
      classes.splice(existingIndex, 1);
    else
      classes.push(className);

    el.className = classes.join(' ');
  }
})