CODEWITHSUNDEEP
htmlcss
DavSev
DavSev

Reputation: 1111

toggle div using css - show/hide div located relative position to buttons

three divs, each div contains parent div, an input, and a hidden div. I want to be able to show the hidden div that follows the checkbox. I want to toggle a div display when I click the checkbox, If the checkbox is checked I want the next div to be seen. I wrote a css code but no matter which checkbox I check the only div that is toggeled is the first one

this is the 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>

this is the 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;
}

How can I do that each checkbox will control the div that has common parent.

My code is here: https://codepen.io/davsev/pen/JjdJYQw

Thanks

Upvotes: 0

Views: 379

Answers (2)

Nachovz
Nachovz

Reputation: 11

I think you almost got it. I tried assigning a unique id to each input and it worked: (same 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>

The checked value it's being set to the first myid. That's why it wasn't working on the rest.

Upvotes: 1

Jax-p
Jax-p

Reputation: 8593

The problem is that your are using multiple id with value myid which has to be unique. Each of your label has value for="myid2 which actually triggers only the first checkbox which has been found (first checkbox with id="myid").

I've updated each of your checkboxes to contains id="someUniqueID" and label for="someUniqueID" to be unique.

Working example:

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>

Upvotes: 2

Related Questions