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

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.