переключать div с помощью css - показывать / скрывать div, расположенный относительно кнопок

Question

три div, каждый div содержит родительский div, вход и скрытый div. Я хочу, чтобы иметь возможность показать скрытый div, который следует за флажком. Я хочу переключить отображение div, когда я нажимаю флажок. Если флажок установлен, я хочу, чтобы следующий div был виден. Я написал код css, но независимо от того, какой флажок я проверяю, единственный div, который переключается, является первым

, это html

<div class="check-btn">

    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

<div class="check-btn">

    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>
<div class="check-btn">


    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

, это css:

div input {
  margin-right: 100px;
}

.check-btn label {
  display: inline-block;
}

.check-btn input {
  display: none;
}

.clicker {
  background: green;
  padding: 5px 10px;
}

.hiddendiv {
  background: #000;
  width: 100px;
  height: 100px;
  display: none;
}

.check-btn input:checked ~ .hiddendiv {
  display: block;
}

Как я могу сделать так, чтобы каждый флажок контролировал div, у которого есть общий родительский элемент.

Мой код здесь: https://codepen.io/davsev/pen/JjdJYQw

Спасибо

Answer 1

Проблема в том, что вы используете несколько id со значением myid, которое должно быть уникальным. Каждый из ваших ярлыков имеет значение for="myid2, которое фактически вызывает только первый найденный флажок (первый флажок с id="myid").

Я обновил каждый из ваших флажков, чтобы он содержал id="someUniqueID" и ярлык for="someUniqueID" быть уникальным.

Рабочий пример:

div input {
  margin-right: 100px;
}

.check-btn label {
  display: inline-block;
}

.check-btn input {
  display: none;
}

.clicker {
  background: green;
  padding: 5px 10px;
}

.hiddendiv {
  background: #000;
  width: 100px;
  height: 100px;
  display: none;
}

.check-btn input:checked ~ .hiddendiv {
  display: block;
}

<div class="check-btn">

    <input id="myid" type="checkbox" >
    <label for="myid" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

<div class="check-btn">

    <input id="myid2" type="checkbox" >
    <label for="myid2" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>
<div class="check-btn">


    <input id="myid3" type="checkbox" >
    <label for="myid3" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

Answer 2

Я думаю, вы почти поняли. Я попытался присвоить уникальный идентификатор каждому входу, и это сработало: (то же самое css)

<div class="check-btn">

    <input id="myid1" type="checkbox" >
    <label for="myid1" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

<div class="check-btn">

    <input id="myid2" type="checkbox" >
    <label for="myid2" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>
<div class="check-btn">


    <input id="myid3" type="checkbox" >
    <label for="myid3" class="clicker">Click me</label>
    <div class="hiddendiv"></div>

</div>

Значение проверено устанавливается на первое myid, Вот почему это не сработало в остальном.