Toggle Class with jQuery

toggle-class.js

/*
 * <button data-toggle-class="#targetDiv:some-class">Toggle this Class on the Element</button>
 */

$("[data-toggle-class]").on('click', function(e){
  e.preventDefault();
  const config = $(this).data('toggle-class').split(':');
  const $target = $(config[0]);
  const className = config[1];

  $target.toggleClass(className);
});

/*
 * Vanilla equivalent
 */
document.querySelectorAll('[data-toggle-class]').forEach((element) => {
  element.addEventListener('click', (event) => {
    event.preventDefault();
    const [target, className] = element.getAttribute('data-toggle-class').split(':');
    document.querySelector(target).classList.toggle(className);
  });
});

Very useful jQuery function I use in almost every project. Keep your animations and toggling behaviour in your CSS, and you can reuse this trigger for most of your behavioural needs.

<button data-toggle-class="#targetDiv:some-class">Toggle this Class on the Element</button>