Показать/скрыть DIV, нажав на флажок, не работает

Question

input[type=checkbox] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    width: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
} 
 

 
`.ds-drop-down` { 
 
    background: url('../../images/light-grey-disclosure-arrow-down.png')no-repeat scroll center center transparent; 
 
    padding: 10px 5px; 
 
    height: 0px; 
 
    width: 8px; 
 
    position: absolute; 
 
    top: 63px; 
 
    border: 1px solid blue; 
 
} 
 

 
.ds-btn { 
 
    height: 22px; 
 
    width: 20px; 
 
    padding: 4px; 
 
    top: 63px; 
 
    position: absolute; 
 
    border: 1px solid blue; 
 
    left: 579px; 
 
} 
 

 
#span-advanced-search { 
 
    border: 2px solid blue; 
 

 
    left: 20px; 
 
    width: 600px; 
 
    padding: 10px; 
 
} 
 

 
input[type=checkbox]:checked ~ div { 
 
    background: green; 
 
    display: block; 
 
    visibility: visible; 
 
    position: absolute; 
 
    width: 600px; 
 
    padding: 10px; 
 
}

<label for="toggle-1" class="ds-drop-down" role="button" data-tooltip="Show search options"/> 
 
<input type="checkbox" id="toggle-1"></input> 
 
<div id="span-advanced-search"> 
 
\t <label>Education Level:</label> <input type="text"/><br></br> 
 
\t <label>Type of Learning Material:</label> <input type="text"/><br></br> 
 
\t <label>Difficulty Level:</label> <input type="text"/><br></br> 
 
\t <label>Author:</label> <input type="text"/><br></br> 
 
</div>

Я хочу показать div -> 'поверочного Продвинутая поиска', нажав на checkbox -> 'тумблер-1' , Изначально div будет скрыт, а если checkbox не установлен, то необходимо также скрывать div. Я поделился своим фрагментом кода выше, он не работает, когда я нажимаю на checkboxdiv не отображается. Пожалуйста, помогите мне.

Answer 1

Я не уверен, что это то, что вы ищете, но надеюсь, что это поможет.

$(document).ready(function(){ 
 
     $('input[type="checkbox"]').click(function(){ 
 
      if($(this).attr("value")=="checkbox"){ 
 
       $("#span-advanced-search").toggle(); 
 
      } 
 
      }); 
 
    });

#span-advanced-search{ 
 
    padding: 20px; 
 
    display: none; 
 
    margin-top: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <label><input type="checkbox" name="colorCheckbox" value="checkbox"></label> 
 
</div> 
 
<div id="span-advanced-search"> 
 
\t <label>Education Level:</label> <input type="text"/><br></br> 
 
\t <label>Type of Learning Material:</label> <input type="text"/><br></br> 
 
\t <label>Difficulty Level:</label> <input type="text"/><br></br> 
 
\t <label>Author:</label> <input type="text"/><br></br> 
 
</div>