CODEWITHSUNDEEP
javascripthtmlcss
Jim
Jim

Reputation: 47

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

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}

Upvotes: 2

Views: 4967

Answers (4)

Garrett
Garrett

Reputation: 106

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.

Upvotes: 0

HariV
HariV

Reputation: 707

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';
    }
} );

Upvotes: 0

Akansh
Akansh

Reputation: 1785

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';
}

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 192317

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>

Upvotes: 2

Related Questions