$(el).on('click', function() {
  $(this).toggleClass(className);
});

// Первый вариант с jQ. Где e - это нужный селектор,
// на который нужно повесить событие "клик"
// this - тот же селектор, его можно заменить на другой, нужный
// className - это имя класса, который нужно добавлять
// и удалять по событию "клик"

// Так как подозреваю, что Вы недавно в JS, объясню подробней:
// Большинство листенеров (слушателей, событий) можно повесить
// Именно описанным сверху способом, где мы меняем
// 'click' на 'mousemove', 'resize' и так далее по необходимости
// Первый параметр здесь - название события
// Второй - функция-коллбэк, функция обратного вызова,
// Которая срабатывает при наступлении этого события
// И никогда иначе. 
// Внутри тела функции-коллбэка (то есть внутри фигурных скобок)
// Проводим все необходимые Вам действия.

document.querySelector(el).addEventListener('click', function() {
  el.classList.toggle(className);
});

// Второй вариант на plain JS, делает то же самое
// Для простоты, красоты и читабельности кода можно 
// заранее объявить переменную
// и записать в неё ДОМ-элемент:

var el = document.querySelector(el).

el.addEventListener(....)