Как переключать классы между элементами?

Question

[Иван Медведев]

<div id="loc_box_w">
    <div class="state_wrap">
        Content
    </div>
    <div class="state_wrap">
        Content
    </div>
</div>

Логика следующая. При клике на один из элементов с классом .state_wrap, ему надо присвоить класс .selected, а соседним элементам с таким же классом надо дать класс .hidden.

Вот что я наваял:

const loc_box = $('#loc_box_w');
$('.state_wrap').click( function () {
    loc_box.addClass('single_state');
    $('.state_wrap').removeClass('selected');
    $('.state_wrap').addClass('hidden');
    $(this).toggleClass('selected');
});

В итоге, добавляется и hidden и selected. Необходимо, когда один элемент selected, то все его соседи hidden

Помогите подкорректировать код.

Comments

[Ankhena]

- У всех убрать selected
- Всем добавить hidden
- Для this добавить selected
- Для this убрать hidden

Чего у вас не хватает?

[Иван Медведев]

Ankhena, а не хватает у меня
$(this).removeClass('hidden');
Спасибо!

[Вадим]

Иван Медведев, Продублируйте в ответы и отметьте решением или удалите вопрос чтобы одни не тратили время на вопрос, а другие, со схожей проблемой, смогли найти ответ не задавая новый вопрос.
Спасибо.

Answer 1

[Иван Медведев]

Итак, решение нашлось благодаря @Ankhena
const loc_box = $('#loc_box_w');
$('.state_wrap').click( function () {
loc_box.addClass('single_state');
$('.state_wrap').removeClass('selected');
$('.state_wrap').addClass('hidden');
$(this).toggleClass('selected');
$(this).removeClass('hidden');
});