$(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(....)
