Estoy tratando de mostrar la etiqueta div cuando la casilla de verificación está marcada. Todo funciona, pero cuando muevo la etiqueta hacia abajo unas pocas líneas, deja de funcionar. Si pongo la pestaña al lado de la etiqueta de entrada, entonces funciona bien.

CSS

 #toggle-content-box{ display:none; } #mycheckbox:checked ~ #toggle-content-box{ display:block; height:100px; }

Si coloco el div debajo de la línea, entonces funciona perfectamente.

 <input type="checkbox" name="file_id" id="mycheckbox" value=""> <div id="toggle-content-box">This div will display when checkbox above is checked</div>

Pero por alguna razón, necesito mover este div hacia abajo unas 10 líneas desde la línea, luego deja de funcionar. El div no se muestra cuando la casilla de verificación está marcada.