Checkbox doesn't toggle visibility of div

Hi,

for my sheet I want to add an option for the players to add containers for their characters in case they need them to store equipment. The players can activate up to 5 extra containers. With checkboxes they can activate/deactivate them. Now I'm currently trying to add the CSS to the checkboxes to toggle the visiblity of the div, but it doesn't work.

HTML:

<div>
   <input type="checkbox" class="behaelter1" name="attr_behaelter1" value='1'><b>Beh&auml;lter 1</b>
   <input type="checkbox" class="behaelter2" name="attr_behaelter2" value='1'><b>Beh&auml;lter 2</b>
   <input type="checkbox" class="behaelter3" name="attr_behaelter3" value='1'><b>Beh&auml;lter 3</b>
   <input type="checkbox" class="behaelter4" name="attr_behaelter4" value='1'><b>Beh&auml;lter 4</b>
   <input type="checkbox" class="behaelter5" name="attr_behaelter5" value='1'><b>Beh&auml;lter 5</b>
</div>
...
<div class="behaelter1">
....
</div>

CSS:

div.sheet-behaelter1 {
    display: none;
}

input.sheet-behaelter1:checked ~ div.sheet-behaelter1 {
    display: block;
}

I also tried to make the "path" of the input clearer with

div + input.sheet-behaelter1:checked ~ div.sheet-behaelter1 {

but that also didn't work. The div indeed gets the display:none but the click on the checkbox does nothing.

What is the error here?

The checkbox that controls the hide/show area needs to be in the same container as the div its hiding/showing. Try:

<div>
   <input type="checkbox" class="behaelter1" name="attr_behaelter1" value='1'><b>Beh&auml;lter 1</b>
   <input type="checkbox" class="behaelter2" name="attr_behaelter2" value='1'><b>Beh&auml;lter 2</b>
   <input type="checkbox" class="behaelter3" name="attr_behaelter3" value='1'><b>Beh&auml;lter 3</b>
   <input type="checkbox" class="behaelter4" name="attr_behaelter4" value='1'><b>Beh&auml;lter 4</b>
   <input type="checkbox" class="behaelter5" name="attr_behaelter5" value='1'><b>Beh&auml;lter 5</b>
</div>
...
<input type="checkbox" class="behaelter1 hidden" name="attr_behaelter1" value='1'>
<div class="behaelter1">
....
</div>

and adding the css:

sheet-hidden {        
     display:none;
}

Works like a charm, thank you! :)

Cheers!

I'd suggest simplifying your hidden input:

<input type="hidden" name="attr_behaelter1">

Primal Zed said:

I'd suggest simplifying your hidden input:

<input type="hidden" name="attr_behaelter1">

Depends on your definition of simplify.  The HTML is simpler, for sure. You do still need a class unless you are always going to use the + instead of the ~ The CSS for the above would look like this:

input[value="1"] + .sheet-hidden {
    display: none;
}

or

.sheet-hidden[value="1"] ~ .sheet-hidden {
    display: none;
}

For my money, it's generally easier to use checkboxes so I don't have to remember the different values, etc.  I find it easier to just use:

.sheet-hidden:checked ~ .sheet-hidden {
    display: none;
}

But there are definitely times the hidden input type is easier and more versatile. I'm using them rather extensively in a sheet right now, just not as much for CSS (though they are finding their way into that, too.

I will also note, if the original form area used radio buttons instead of checkboxes, the hidden input field is a lot easier at that point...