Show/hide a div by clicking a checkbox,not working - html

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">
<label>Education Level:</label> <input type="text"/><br></br>
<label>Type of Learning Material:</label> <input type="text"/><br></br>
<label>Difficulty Level:</label> <input type="text"/><br></br>
<label>Author:</label> <input type="text"/><br></br>
</div>
I want to show div-> 'span-advanced-search' by clicking on the checkbox->'toggle-1'. Initially the div will be hidden and when the checkbox is unchecked then also the div must be hidden.
I have shared my code snippet above,it's not working,when i am clicking on the checkbox the div is not showing.Please help me.

Answer 1

I'm not sure if this is what you are looking for, but hope it helps some way.
$(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">
<label>Education Level:</label> <input type="text"/><br></br>
<label>Type of Learning Material:</label> <input type="text"/><br></br>
<label>Difficulty Level:</label> <input type="text"/><br></br>
<label>Author:</label> <input type="text"/><br></br>
</div>