Список дивов ,при выборе которых должен открываться другой див, а выбранные до этого скрыться

Question

Необходимо сделать следующую конструкцию: Есть горизонтальный список дивов, например при крике на див 1 открывается под ним скрытая область, при клике на див 2 открывается также скрытая область а область дива 1 скрывается.

Пробовал такое: Но работает не так как нужно мне

.qwe {
  height: 300px;
  width: 300px;
  border: 2px solid #000;
  position: relative;
  float: left;
  margin-left: 20px;
}

.qwe > input {
  display: none;
}
.qwe label {
  text-decoration: underline;
  cursor: pointer;
  color: blue;
}
.qwe > input ~ label::after {
  content: "OPEN";
}
.qwe > input:checked ~ label::after {
  content: "CLOSE";
}
.qwe > input:checked ~ .op {
  display: block;
}

.op {
  background: #777;
  position: absolute;
  width: 100%;
  display: none;
  top: 100%;
}

<div class="qwe">
  <input id="qwe1" type="checkbox">
  <label for="qwe1"></label>
  <div class="op">
    <label for="qwe1">CLOSE</label>
    <h1>GOOD</h1>
  </div>
</div>
<div class="qwe">
  <input id="qwe2" type="checkbox">
  <label for="qwe2"></label>
  <div class="op">
    <label for="qwe2">CLOSE</label>
    <h1>GOOD</h1>
  </div>
</div>

Answer 1

самое простое решение target tabs

div:not(:target){display: none;}

<a href='#a'>a</a>
<a href='#b'>b</a>
<a href='#c'>c</a>
<div id='a'>div a</div>
<div id='b'>div b</div>
<div id='c'>div c</div>

бонусом:

1 хэштег целевого div`а по умолчанию будет отображаться в адресной строке

2 переходы от одного к другому будут писаться в историю

3 будет доступна навигация кнопками "вперед" "назад"

p.s. если охота всё же на инпутах, замени checkbox`ы на radio задав всем одинаковый параметр name.

[type=radio], :not(:checked) + div{display: none;}
label{border: 1px dashed #909; margin-left: 10%;}

<label for='a'>label a</label>
<label for='b'>label b</label>
<label for='c'>label c</label>
<label for='d'>label d</label>
<hr/>
<input id='a' type='radio' name='xyz' /><div>div a</div>
<input id='b' type='radio' name='xyz' /><div>div b</div>
<input id='c' type='radio' name='xyz' /><div>div c</div>
<input id='d' type='radio' name='xyz' /><div>div d</div>

БЛОГ НА HUSL

Список дивов ,при выборе которых должен открываться другой див, а выбранные до этого скрыться

Ответы (1 шт):