Как удалять классы с других элементов при нажатии на текущий (не все так просто, подробнее внутри)?

Question

[msdoc11]

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

this.container = document.createElement("div");
this.container.classList.add('custom-select');
this.optionsWrapper = document.createElement("div");
this.optionsWrapper.classList.add('options-wrapper');
this.container.addEventListener("click", this.toggleOptions.bind(this));

CustomSelect.prototype = {
toggleOptions: function () {
    if (event.target !== this.reset) {
       this.container.classList.toggle("hide");
       this.optionsWrapper.classList.toggle("hidden");
    }
},
};

Пример- нужно, чтобы открытым оставался один

Comments

[Ankhena]

Проверять есть ли у текущего класс открытия.
Закрывать все.
Если у текущего не было открывающего класса - добавлять.

[msdoc11]

Ankhena, уже с десяток проверок делал, ничего не работает

Answer 1

[Сергей delphinpro]

"Не все так просто". Как пафосно.

А на деле всего лишь реализовать изъезженную штуку. Click outside называется. Закрытие селекта при клике вне его.
Гуглить по фразе javascript click outside, ответов - тысячи.

UPD

Comments

[msdoc11]

Реализовано, но она на то и outside, что только при клике вне блоков селектов работает

[msdoc11]

Так же написан код который при клике на селект перебирает все открытые и ставит нужные классы, но он просто не работает, не видит классы. Выдает ошибку что они не существуют

[Сергей delphinpro]

msdoc11, Хорошо, с этого нужно было начинать. Где проблемный код?

Хотя, ладно. Обновлю ответ, добавлю пример..