Переключение классов по клику
 

Здравствуйте. Есть меню:

<nav class="middleMenu wrap__middleMenu">
        <a href="#" class="link middleMenu__control">Каталог товаров</a>
        <div class="middleMenu__drop middleMenu__drop--hidden">Электроинструмент</a>
            <a href="#" class="link middleMenu__link">Бензоинструмент</a>
            <a href="#" class="link middleMenu__link">Сварочное оборудование</a>
            <a href="#" class="link middleMenu__link">Расходные материалы</a>
        </div>
    </nav>

Мне необходимо по клику на "middleMenu__control" переключать класс "middleMenu__drop--hidden" на "middleMenu__drop--visible" и наоборот. То есть это меню которое на мобильных экранах становится бургером и должно раскрываться, но э
то должно происходить не через инлайн стили, а через подмену класса. Подскажите пожалуйста, как это проще всего организовать через JQ?
Я пытался удалять класс "middleMenu__drop--hidden" и добавлять новый класс "middleMenu__drop--visible" - это выходит, но вот что бы по второму клику удалить уже "middleMenu__drop--visible" и добавить "middleMenu__drop--hidden" не получается, да и чувствую, что как-то по проще можно это сделать

Tipylja,
Смотрите .toggleClass()

Tipylja,

$(function() {
     $(".middleMenu__control").on("click", function(event) {
      event.preventDefault();
     $(".middleMenu__drop").toggleClass("middleMenu__drop--hidden middleMenu__drop--visible");
})
});

Спасибо за ответы, все работает!