i am trying to create a system where content is hidden by default and only displayed when a checkbox is checked. The goal is to show the content when the checkbox is checked and hide it when unchecked, so that other content can be shown as well upon checking.
Below is the code I have attempted, but unfortunately it is not functioning as intended:
<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>