Как закрывать один спойлер при открытии другого?

Question

[Акоб Тунян]

Передаю id элемента и по клику на кнопку открываю и закрываю спойлер. Понадобилось сделать так, чтобы при открытии одного спойлера, закрывались все остальные, но не могу понять как это сделать. Надо в функции прописать закрытие для всех имеющихся спойлеров?

function Show(id) {
    "use strict";
    var Object = document.getElementById(id).style;
    Object.display = Object.display ? '' : 'block';
}

Comments

[Lord_Dantes]

При клике, закрывайте все спойлеры, потом делайте отношение типо "this" и открываете спойлер.

Answer 1

[Антон Шаманов]

можно хранить id открытого спойлера в глобальной переменной или добавить спойлера класс и при открытии нового спойлера перебирать все спойлеры в поисках открытого

Comments

[Антон Швец]

зачем искать открытый, просто все закрываешь а потом открываешь нужный

[Антон Шаманов]

Антон Швец, я к jquery привык, а там это реализуется примерно так: $('.spoiler.active').hide()

[Акоб Тунян]

Антон Швец, я попробовал написать так:

function Show(id) {
    "use strict";
    var Object = document.getElementById('s1').style;
    Object.display = 'none';
    Object = document.getElementById('s2').style;
    Object.display = 'none';
    Object = document.getElementById('s3').style;
    Object.display = 'none';
    Object = document.getElementById(id).style;
    Object.display = Object.display ? '' : 'block';
}

в этом случае, он вообще непредсказуемо работает. Первый спойлер не открывается, пока не откроешь второй (второй при этом закрывается). И при повторном клике по кнопке, он не закрывается (1 клик - открыть, повторный - свернуть обратно).

[Антон Шаманов]

Акоб Тунян, да вы батенька индус :)

[Акоб Тунян]

Антон Шаманов, есть немного... пока только осваиваюсь в JS. поэтому не совсем понимаю как все работает

[Антон Шаманов]

Акоб Тунян,

var activeSpoiler;
function showSpoiler(id) {
    if (activeSpoiler) {
        document.getElementById(id).style.display = 'none';
    }
    activeSpoiler = id;
    document.getElementById(id).style.display = 'block';
}

[Акоб Тунян]

Антон Шаманов, большое спасибо!
Только в условии немного изменил вместо id - activeSpoiler

document.getElementById(activeSpoiler).style.display = 'none';

[Антон Швец]

Акоб Тунян,

function Show(id) {
    ['s1', 's2','s3'].forEach(_id => document.getElementById(_id).hidden = true);
    document.getElementById(id).hidden = false;
}

или

function Show(id) {
    ['s1', 's2','s3']
      .forEach(_id => document.getElementById(_id).classList.add('hidden'));
    document.getElementById(id).classList.remove('hidden');
}

Не используйте слово Object для имени переменной никогда, это стандартный встроенный объект.