Как удалить класс у выбранных братьев и сестер dom? как открыть div и закрыть все остальные? мне использовать siblings() ⇐ Jquery

[Anonymous]

У меня есть эта сетка с 3 столбцами, и я хотел сделать так, чтобы, когда я нажимаю на один из элементов div, она опускалась на строку и охватывала всю строку, а также закрывалась снова, когда я нажимаю на нее снова . и я заставил это работать. но я хотел сделать так, чтобы, когда я открываю другой div, он закрывал все остальные, если они открыты? так что одновременно открыт только один? как бы мне это сделать?

1 one
2 two
3 three
4 four
5 five
6 six
7 seven
8 eight
9 nine
10 ten



Кроме того, у меня есть другие элементы div рядом с h1, в которых будет информация, но я хочу, чтобы они показывали только, расширился ли его родительский элемент div и охватил всю строку? поэтому я хочу изменить отображение со скрытого на блокировку, только ЕСЛИ оно было открыто. Я знаю, что мне нужно добавить или удалить класс HidsINFO, но, например, мне придется создать функцию для каждого div, чтобы сделать это?#gridALBUM {
margin: 50px auto;
max-width: 908px;
display: grid;
grid-gap: 0 4px;
grid-template-columns: repeat(3, 300px);
background-color: lightblue;
}

#gridALBUM > div {
border: 1px solid black;
display: flex;
}

.hidesINFO {
display: none;
}

.span {
grid-column: 1 / 4;
background-color: blue;
}

также, есть ли лучший способ написать приведенный ниже код? вместо того, чтобы иметь один и тот же точный код, но с разными идентификаторами для каждого элемента управления? потому что мне придется добавить больше элементов div, и я не хочу копировать и вставлять каждую функцию, когда они на самом деле делают одно и то же, только с разными элементами
function toggles1() {
document.getElementById("one").classList.toggle("span"); }

function toggles2() {
document.getElementById("two").classList.toggle("span"); }

function toggles3() {
document.getElementById("three").classList.toggle("span"); }

function toggles4() {
document.getElementById("four").classList.toggle("span"); }

function toggles5() {
document.getElementById("five").classList.toggle("span"); }

function toggles6() {
document.getElementById("six").classList.toggle("span"); }

function toggles7() {
document.getElementById("seven").classList.toggle("span"); }

function toggles8() {
document.getElementById("eight").classList.toggle("span"); }

function toggles9() {
document.getElementById("nine").classList.toggle("span"); }

function toggles10() {
document.getElementById("ten").classList.toggle("span"); }

Использую ли я siblings(), чтобы поставить лайк и удалить селекторы? как это сработает?
function toggles2() {
document.getElementById("two").classList.toggle("span");
document.getElementById("two").siblings().classList.remove("span");
document.getElementById("two").siblings().child[1].classList.remove("hidesINFO");}


Подробнее здесь: https://stackoverflow.com/questions/790 ... d-have-all