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älter 1</b> <input type="checkbox" class="behaelter2" name="attr_behaelter2" value='1'><b>Behälter 2</b> <input type="checkbox" class="behaelter3" name="attr_behaelter3" value='1'><b>Behälter 3</b> <input type="checkbox" class="behaelter4" name="attr_behaelter4" value='1'><b>Behälter 4</b> <input type="checkbox" class="behaelter5" name="attr_behaelter5" value='1'><b>Behä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älter 1</b>    <input type="checkbox" class="behaelter2" name="attr_behaelter2" value='1'><b>Behälter 2</b>    <input type="checkbox" class="behaelter3" name="attr_behaelter3" value='1'><b>Behälter 3</b>    <input type="checkbox" class="behaelter4" name="attr_behaelter4" value='1'><b>Behälter 4</b>    <input type="checkbox" class="behaelter5" name="attr_behaelter5" value='1'><b>Behä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...