How to select a div inside another element when a checkbox input is checked?

Question

I have a checkbox that I need when it's checked to show a div inside another element (not next to the checkbox it's inside a div that is next to it's parent)

 <nav>
   <div class='container'>
     <label class="tog" for="toggle">&#9776;</label>
     <input type="checkbox" id="toggle"></input> //This is the checkbox
   </div>
 </nav>
 <div class='container'>
   <div class='select'> // This is the div that I want to select when checkbox is checked
   </div>
 </div>

I tried these selectors but didn't work:

#toggle:checked   ~ .select{display:block}
#toggle:checked   + .select{display:block}

cannot be done. https://stackoverflow.com/a/1817801/2119863 – Unamata Sanatarai Oct 10 '17 at 18:17 — Unamata Sanatarai, Oct 10 '17 at 18:17

score 2 · Answer 1 · answered Oct 10 '17 at 18:21

There is not parent selector in CSS. If you can change the HTML, move the input to the same level of nav and the div's .container. Hide the input, which is controlled by the label, and using CSS sibling and parent rules you can control the div display property:

#toggle {
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#toggle:checked + nav .tog {
  color: red;
}

#toggle:not(:checked) ~ .container > .select {
  display: none;
}

<input type="checkbox" id="toggle">

<nav>
  <div class="container">
    <label class="tog" for="toggle">&#9776;</label>
  </div>
</nav>
<div class="container">
  <div class="select"> // This is the div that I want to select when checkbox is checked
  </div>
</div>

score 1 · Answer 2 · answered Oct 10 '17 at 18:29

1

This will solve your problem with JS easily.

var input = document.getElementById('toggle');
var select = document.querySelectorAll('.select')[0];
input.onchange = function(){
   select.style.display = this.checked? 'block': 'none';
}

answered Oct 10 '17 at 18:29

Akansh

1,715
3
15
34

score 0 · Answer 3 · answered Oct 10 '17 at 18:33

I haven't tried this, but if you need to show/hide a div based on the status of a checkbox, you can try this

    <nav>
        <div class='container'>
            <label class="tog" for="toggle">&#9776;</label>
            <input type="checkbox" id="toggle"></input> //This is the checkbox
        </div>
    </nav>

<div class='container'>
    <div class='select' id="div-to-show" style="display:none">
    </div>
</div>

var check = document.getElementById('toggle');
check.addEventListener( 'click', function( event ){ 
    if( check.checked === true ){ 
        document.getElementById('div-to-show').style.display = 'block'; 
    }
    else{
        document.getElementById('div-to-show').style.display = 'none';
    }
} );

score 0 · Answer 4 · answered Oct 10 '17 at 18:37

The key part of your problem is here

it's inside a div that is next to it's parent

This can't be done with CSS right now, as the target needs to be within the same parent. You can look easwee's answer to this question to get a little more in-depth explanation, or BoltClock's answer to get MUCH more in-depth.

Obviously, this can be done with Javascript if you want to go down that route, but it sounded like you wanted a CSS answer.

How to select a div inside another element when a checkbox input is checked?

4 Answers4