Question

0

52

Views

Address CSS general sibling selector and input:checked

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]:checked

not the unchecked Version.

Maybe there is a way with nextElementSibling? Thanx for your help!

about 1 month ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-07-04T16:06:50.274Z

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>