使用复选框和 javascript 更改 CSS 值

Question

I am trying to hide and display a div based on the state of a checkbox using javascript but I don't seem to be getting it right. I am not very experienced with js so I could be missing something very obvious. Any advice would be much appreciated. the target div is the on-toggle div in the second half of the html code.

 var checkbox = document.querySelector("input[name=toggle]"); checkbox.addEventListener( 'change', function() { if(this.checked) { document.getElementById("on-toggle").style.display = "block"; document.getElementById("on-toggle").style.height = "auto"; } else { document.getElementById("on-toggle").style.display = "none"; document.getElementById("on-toggle").style.height = "0"; }

 <div id="switch"> <h2 id="CTA-switch">Turn creativity on </h2> <div class="switch"> <input type="checkbox" name="toggle"> <label for="toggle"> <i class="bulb"> <span class="bulb-center"></span> <span class="filament-1"></span> <span class="filament-2"></span> <span class="reflections"> <span></span> </span> <span class="sparks"> <i class="spark1"></i> <i class="spark2"></i> <i class="spark3"></i> <i class="spark4"></i> </span> </i> </label> </div> </div> <div id="on-toggle"> <div id="references"> <h1>REFERENCE SITES</h1> </div> </div> </div>

Answer 1

You'll need to grab an actual element so your javascript code works. The id "on-toggle" does not currently exist on any element on your html code.