target div with a checkbox

Question

I have a checkbox which hides/shows a div. It works when I put the checkbox directly above the div. When I place the checkbox somewhere else in the page (for better usability) it doesnt't work. Is there a way to target a certain div to make the checkbox work from everywhere on the page?

Here is the HTML-code:

<input type="checkbox" id="toggle-result" checked="checked">  </input>

CSS:

input[type=checkbox]:checked ~ div {
   display: none;
}

There could be additional code that's breaking the functionality of the page. You might have to post a bit more (what's on the page) code. I've had this exact problem before. — Head, May 22 '13 at 14:16
See http://stackoverflow.com/questions/10782054/what-does-the-css-tilde-squiggle-twiddle-selector-do. Moving the div to other locations is breaking your selector. — Chris, May 22 '13 at 14:22

Mr. Alien · Accepted Answer · 2013-05-22T14:38:20.680

Using CSS, you can select child elements and adjacent elements, so what you are trying to do will work if div is placed right after the checkbox but if you want to make it work when div is somewhere else(above the checkbox), you need to use JavaScript, if it's after, you can use + to select adjacent element or nested adjacent element

Demo

<input type="checkbox" />
<div>Toggle Using CSS</div>

input[type=checkbox]:checked + div {
    display: block;
}

div {
    display: none;
}

Targetting div which is farther away somewhere (But not before the checkbox) like this

Demo 2

input[type=checkbox]:checked + a + .blah .target {
    display: block;
}

.target {
    display: none;
}

<input type="checkbox" />
<a href="#">Dummy Link</a>

<div class="blah">
    <div class="target">Complicated Selector, Isn't It?</div>
</div>

Explanation : input[type=checkbox]:checked + a + .blah .target Over here we select the checkbox which is in a checked state, and than we chain this by selecting the adjacent element which is an anchor tag, and than we select another adjacent element which is adjacent to a tag which is div with a class .blah, and than we select nested child element with a class .target

Using jQuery To Do (Doesn't matter where the target element is) Demo 3

<input type="checkbox" id="checkme" />
<a href="#">Dummy Link</a>
<div id="show_on_check" style="display:none">
    This content should appear when the checkbox is checked
</div>

$(document).ready(function() {
    $('#checkme').change(function() {
        $('#show_on_check').toggle();
    });
});

score 0 · Answer 2 · answered May 22 '13 at 14:20

0

input[type=checkbox]:checked ~ div {
   display: none;
}

Will select every div element that is preceded by a input that is checked. The reason why it probably breaks is because the input is not preceding the div (Like you state in your question)

answered May 22 '13 at 14:20

Darren

68,902
24
138
144

I believe that's not quite correct. It will select every `div` that shares a parent with a checked input. – Chris May 22 '13 at 14:21
@Chris - `E ~ F an F element preceded by an E element` – Darren May 22 '13 at 14:25

score 0 · Answer 3 · answered May 22 '13 at 14:24

0

Use the element IDs in your selectors:

<input type="checkbox" id="toggle-result" checked="checked"/>

<div id="myDiv">showme</div>

<style>
    #toggle-result:checked ~ #myDiv {
        display: none;
    }
</style>

answered May 22 '13 at 14:24

paul

21,653
1
53
54

target div with a checkbox

3 Answers3