Kак через javascript скрыть все блоки с одним классе кроме одного?

Question

[pieredunn]

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

function openbox(id){
    display = document.getElementById(id).style.display;

    if(display=='none'){
       document.getElementById(id).style.display='block';
    }else{
       document.getElementById(id).style.display='none';
    }
}

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

Answer 1

[Сергей delphinpro]

<button onclick=openbox(1)>Toggle 1</button>
<button onclick=openbox(2)>Toggle 2</button>
<button onclick=openbox(3)>Toggle 3</button>

<div class="item" id="item1">item 1</div>
<div class="item" id="item2" hidden>item 2</div>
<div class="item" id="item3" hidden>item 3</div>

function openbox(id){
    var el = document.getElementById('item'+id);

    if(el.hidden){
      document.querySelectorAll('.item').forEach(item => item.hidden = true);
      el.hidden = false;
    }else{
      el.hidden = true;
    }
}

https://jsfiddle.net/utzr8edr/

.