I've tried to address styles defined like this:
header input[type=checkbox] ~ div#example {max-height:0px;}
header input[type=checkbox]:checked ~ div#example {max-height:100px;}
I would like to do something like
document.getElementById('example').style.maxHeight='10px'; but it should only change input[type=checkbox]:checkednot the unchecked Version.
Maybe there is a way with nextElementSibling? Thanx for your help!
You can reset the maxWidth when the input changes from unchecked to checked and 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>