CODEWITHSUNDEEP
htmlcss
mike kent
mike kent

Reputation: 13

Show/hide content on checkbox

i want to hide all content, i want them to show when checked

like show content when checkbox checked

hide when unchecked so that when i check others they show up too

here is my try but its not working

<style>
#myBike:not(:checked) +#bike {
  display: block !important;
}

#myCar:not(:checked) +#car {
  display: block !important;
}
</style>

<input type="checkbox" id="myBike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="myCar">
<label for="vehicle2"> I have a car</label><br>

<div class="row" id="bike">
  Something for bike
</div>

<div class="row" id="car">
  Something for car
</div>

Upvotes: 1

Views: 374

Answers (1)

seantsang
seantsang

Reputation: 1206

Please check the code below.

#bike {
  display: none;
}

#myBike:checked~#bike {
  display: block;
}

#car {
  display: none;
}

#myCar:checked~#car {
  display: block;
}
<input type="checkbox" id="myBike" />
<label for="vehicle1">I have a bike</label>
<input type="checkbox" id="myCar" />
<label for="vehicle2">I have a car</label>

<div class="row" id="bike">Something for bike</div>

<div class="row" id="car">Something for car</div>

Expanation:

  1. You have used a wrong syntax ~ vs +
  2. By default all div are set as display:block. You should set display:none as its initial.

Upvotes: 3

Related Questions