When I'm nesting my checkboxes in a element my code stops working. I need images to display upon checking a certain checkbox. Code works without nesting the checkboxes in a .
I want my checkboxes to be nested in a so that it changes the display value from none to inline-block in the with the images upon selecting a certain checkbox.
I've tried everything but I think I just can't get my head around this problem.
<body>
<style>
input[type=checkbox]:checked.ivo ~ div #fotoivo {
display: inline-block;
}
input[type=checkbox]:checked.ian ~ div #fotoian {
display: inline-block;
}
input[type=checkbox]:checked.non ~ div #fotonon {
display: inline-block;
}
#fotoivo {
width: 200px;
display: none;
}
#fotoian {
width: 200px;
display: none;
}
#fotonon {
width: 200px;
display: none;
}
</style>
<!--Checkboxes (works without the <div> wrapped around)-->
<!--<div>-->
Ivo: <input type="checkbox" name="ivoian" class="ivo">
Ian: <input type="checkbox" name="ivoian" class="ian">
Non-binair: <input type="checkbox" name="ivoian" class="non">
<!--</div>-->
<!--Images that should change from display: none to inline-block.-->
<div>
<img id="fotoivo" src="ivo.jpg" alt="#">
<img id="fotoian" src="ian.jpg" alt="#">
<img id="fotonon" src="non.jpg" alt="#">
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire