Exploring alternatives to common jquery tasks, toggling classes on elements.

vanilla-javascript-toggles.js

/**
 * Utility - Toggle Class
 * @param {Object} el - element
 * @param {String} cl - class name
 * @use Check for and toggle specified class name
 */
function toggleClass(el, cl) {
  if(el.classList) {
    el.classList.toggle(cl);
  } else {
    var classes = el.className.split(' '),
      existingIndex = classes.indexOf(cl);

    if (existingIndex >= 0) {
      classes.splice(existingIndex, 1);
    } else {
      classes.push(cl);
    }
    el.className = classes.join(' ');
  }
}

/**
 * Utility - Add Event Listener to Classes
 * @param {Array} arr - array
 * @param {String} name - event name
 * @param {Function} fn - function
 * @use Add event listeners to all elements of a class
 */
function addEventListenersToArray(arr, name, fn) {
  Array.prototype.forEach.call(arr, function(el, i) {
    el.addEventListener(name, fn);
  });
}

/**
 * Interaction - Toggle Class on Parent
 * @param {Object} e - event
 */
function toggleClassOnParent(e) {
  e.preventDefault();
  toggleClass(this.parentNode, 's-toggled');
}

/**
 * Interaction - Toggle Class on Self
 * @param {Object} e - event
 */
function toggleClassOnSelf(e) {
  e.preventDefault();
  toggleClass(this, 's-toggled');
}

/**
 * Interaction - Toggle Class on Target
 * @param {Object} e - event
 */
function toggleClassOnTarget(e) {
  e.preventDefault();
  var dataTarget = this.getAttribute('data-toggle-target'),
    target = document.querySelectorAll(dataTarget)[0];
  toggleClass(target, 's-toggled');
}

/**
 * Create Event Listeners
 */
function appInit() {
  
  var parentToggles = document.querySelectorAll('.js-toggle-parent'),
    selfToggles = document.querySelectorAll('.js-toggle-self'),
    targetToggles = document.querySelectorAll('.js-toggle-target');

  addEventListenersToArray(parentToggles, 'click', toggleClassOnParent);
  addEventListenersToArray(selfToggles, 'click', toggleClassOnSelf);
  addEventListenersToArray(targetToggles, 'click', toggleClassOnTarget);
}

/**
 * Check for Document Ready and Initialize
 * @param {function} fn - function
 */
function ready(fn) {
  if(document.readyState != 'loading') {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

/**
 * Initialize
 */
ready(appInit);