He intentado abordar estilos definidos así:
entrada de encabezado [tipo = casilla de verificación] ~ div # ejemplo {max-height: 0px;} entrada de encabezado [tipo = casilla de verificación]: marcado ~ div # ejemplo {max-height: 100px;}me gustaría hacer algo como
document.getElementById('ejemplo').style.maxHeight='10px'; pero solo debe cambiarentrada [tipo = casilla de verificación]: marcadono la versión sin marcar.
¿Tal vez hay una manera con nextElementSibling? ¡Gracias por tu ayuda!
Puede restablecer maxWidth cuando la entrada cambia de no marcada a marcada y vv.
document.querySelector('header input[type=checkbox]').addEventListener('change', function(event) { document.getElementById('example').style.maxHeight = event.target.checked ? '10px' : '0px'; }); header input[type=checkbox]~div#example { max-height: 0px; } header input[type=checkbox]:checked~div#example { max-height: 100px; } <header> <input type="checkbox"> <div id="example"></div> </header>