Изменение значений CSS с помощью флажка и javascript

Question

Я пытаюсь скрыть и отобразить div в зависимости от состояния флажка, используя javascript, но, похоже, я не понимаю его правильно. Я не очень опытен с js, поэтому я мог упустить что-то очень очевидное. Любые советы будут высоко ценится. целевой div - это элемент с переключателем во второй половине кода html.

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

Вам нужно получить фактический элемент, чтобы ваш код javascript работал. Идентификатор «on-toggle» в настоящее время не существует ни в одном элементе вашего html кода.