Need some help checkbox checked to display a div

I am making a sheet configuration box. It has check boxes in it when checked are supposed to display a section in another tab on the character sheet.

my HTML and CSS:

The area that I am displaying with a checked checkbox:

<div class="sheet-groundmove">
    <div>
       "bunch of content here"
    </div>
</div>

The checkbox itself:

<input type="checkbox" class="sheet-boolean" name="attr_groundmove"/>

The CSS:

div.sheet-groundmove {
	display:none;
	}
input.sheet-boolean[type="checkbox"][name="attr_groundmove"]:checked ~ div.sheet-groundmove { display:inline-block;
}

Can anyone tell me what I have wrong here and what it is supposed to look like?

You cant use name like that in the css. 

The CSS wizardry wiki page shows one way to do it here: https://wiki.roll20.net/CSS_Wizardry#Hide_Areas

The checkbox is the same:

<input type="checkbox" class="sheet-boolean" name="attr_groundmove"/>

The CSS is altered:

div.sheet-groundmove {
	display:none;
	}
input.sheet-boolean:checked ~ div.sheet-groundmove { display:inline-block;
}

But with this approach, you might need the checkbox and the div it affects to be in the same tab. (I'm not sure.)

I personally use a slightly different approach. 

The checkbox has a linked hidden input, like so:

<input type="checkbox" class="whatever" name="attr_groundmove" value="1"/>
<input type="hidden" class="sheet-boolean" name="attr_groundmove" />

And then the CSS only needs one entry:

input.sheet-boolean:not([value='1']) ~ div.sheet-groundmove {
  display: none;
}

With this approach you can put the hidden input anywhere in the sheet. i normally have a bunch of them at the start of the sheet, the config options.

I'd also suggest changing the stylename sheet-boolean, to something like sheet-groundmove-boolean, just in case you want to use this  technique multiple times in the same sheet - they'll each need their own distinct name. 

Just a bit of confusion here. Where are we placing the checkboxes?

Wait! I have it working....Thanks

Edit: since you have it working, ignore this :)

Ah I forgot you have them in different tabs.

Try using the second method I suggested. Have your checkbox and div as they are.

Move the hidden input to the very top of your character sheet's html

<input type="hidden" class="sheet-boolean" name="attr_groundmove" />

In your CSS, use this

input.sheet-boolean:not([value='1']) ~ div .sheet-groundmove {
  display: none;
}

Note the space between div and .sheet.

See if that works.

edit: Somehow I broke when I added more. So if I have more than one of these type switches can I do this?

	<input type="hidden" class="sheet-boolean" name="attr_groundmove" />
	<input type="hidden" class="sheet-boolean" name="attr_watermove" />
	<input type="hidden" class="sheet-boolean" name="attr_airmove" />
	<input type="hidden" class="sheet-boolean" name="attr_spacemove" />

At the top of the sheet.

with these on an options tab

<input type="checkbox" class="sheet-boolean" name="attr_groundmove" value="1"/>
<input type="checkbox" class="sheet-boolean" name="attr_watermove" value="1"/>
<input type="checkbox" class="sheet-boolean" name="attr_airmove" value="1"/>
<input type="checkbox" class="sheet-boolean" name="attr_spacemove" value="1"/>

and this in CSS:

input.sheet-boolean:not([value='1']) ~ div .sheet-moveoption {
  display: none;
}

You want to give each one its own class - dont use sheet-boolean for all of them. It's an identifier for that specific checkbox.

So, sheet-boolean-groundmove for the first, sheet-boolean-watermove for the second, and so on. (each linked checkbox and hidden input should have the same class, and no other pair should have the same class).

Then 

input.sheet-boolean-groundmove:not([value='1']) ~ div .sheet-moveoption {
  display: none;
}

Scott S. said:

edit: Somehow I broke when I added more. So if I have more than one of these type switches can I do this?

	<input type="hidden" class="sheet-boolean" name="attr_groundmove" />
	<input type="hidden" class="sheet-boolean" name="attr_watermove" />
	<input type="hidden" class="sheet-boolean" name="attr_airmove" />
	<input type="hidden" class="sheet-boolean" name="attr_spacemove" />

At the top of the sheet.

with these on an options tab

<input type="checkbox" class="sheet-boolean" name="attr_groundmove" value="1"/>
<input type="checkbox" class="sheet-boolean" name="attr_watermove" value="1"/>
<input type="checkbox" class="sheet-boolean" name="attr_airmove" value="1"/>
<input type="checkbox" class="sheet-boolean" name="attr_spacemove" value="1"/>

and this in CSS:

input.sheet-boolean:not([value='1']) ~ div .sheet-moveoption {
  display: none;
}

I find it easier just to give each checkbox a different class. That way you can use the class:checked method.  If you like the sheet-boolean for a styling purpose it can have to different classes.

Whats the class:checked method and will it work on divs that are on another tab?

Scott S. said:

Whats the class:checked method and will it work on divs that are on another tab?

Sorry...

<input type="checkbox" class="sheet-boolean sheet-ground" name="attr_groundmove" value="1"/>
<input type="checkbox" class="sheet-boolean sheet-water" name="attr_watermove" value="1"/>
<input type="checkbox" class="sheet-boolean sheet-air" name="attr_airmove" value="1"/>
<input type="checkbox" class="sheet-boolean sheet-space" name="attr_spacemove" value="1"/>

.sheet-ground:not(:checked) ~ div .sheet-moveoption {
  display: none;
}

Also, looking at the above code, I think the issue is that everyone of the inputs had the same value and the same class, so if one wasn't checked, they'd all stay hidden, because the rule would be true.  If you wanted to keep with the value check, just give each input a different value (e.g. 1-4).  At least, I think that would  work.

I just find it easier to give each input it's own class...easier to follow the logic that way, too.

I cannot get one to work at all now....somehow I really broke it

Can you post a barebones version? Meaning showing the inputs and tabs and the CSS?

CSS:
input.sheet-ground:not(:checked) ~ div .sheet-moveoption {
  display: none;
}

Options tab:
<input type="checkbox" class="sheet-boolean sheet-ground" name="attr_groundmove" value="1"/>

General tab:
            <input type="checkbox" class="sheet-boolean sheet-ground" name="attr_groundmove" value="1"/>
		<div class="sheet-moveoption">
		    <div class="sheet-row"> <!-- Unhide this when checkbox is checked -->
                        Bunch of content here <!-- Unhide this when checkbox is checked -->
                    </div> <!-- .sheet-row --> <!-- Unhide this when checkbox is checked -->
		</div>

Try this for your CSS:

.sheet-ground:not(:checked) ~ .sheet-moveoption {
  display: none;
}

You could even do this:

.sheet-ground:not(:checked) + .sheet-moveoption {
  display: none;
}

OK so the battle continues....

The divs are displaying on check. However they are not independent of each other. Instead they cascade down when checked.

The problem I ran into arose when I changed the checkbox classes from sheet-boolean to anything other than that.

HTML:
					<div class="sheet-row sheet-row-stats">
						<div class="sheet-cell sheet-col0"><input type="checkbox" class="sheet-boolean ground" name="attr_groundmove" value="1"/></div><div class="sheet-cell sheet-col1"><span class="sheet-popup">Ground Movement Mode.</span><span class="sheet-tooltip">Only used when character<br />is aquatic or amphibious.</span></div>
					</div>
					<div class="sheet-row sheet-row-stats">
						<div class="sheet-cell sheet-col0"><input type="checkbox" class="sheet-boolean" name="attr_wateroption" value="1"/></div><div class="sheet-cell sheet-col1"><span class="sheet-popup">Water Movement Mode.</span><span class="sheet-tooltip">Water Move: Normally Basic Move/5, rounded down.</span></div>
					</div>
					<input type="hidden" class="sheet-boolean" name="attr_wateroption" />
					<div class="sheet-moveopton">
					<div class="sheet-row sheet-row-stats">
						<div class="sheet-cell sheet-col0"><input type="checkbox" class="sheet-boolean" name="attr_aquaticoption" value="1"/></div><div class="sheet-cell sheet-col2"><span class="sheet-popup">Aquatic</span><span class="sheet-tooltip">Amphibious: both water and ground Move equal Basic Move.</span></div>
						<div class="sheet-cell sheet-col0"><input type="checkbox" class="sheet-boolean" name="attr_amphiboption" value="1"/></div><div class="sheet-cell sheet-col2"><span class="sheet-popup">Amphibious</span><span class="sheet-tooltip">Amphibious: both water and ground Move equal Basic Move.</span></div>
					</div>
					</div>
					<div class="sheet-row sheet-row-stats">
						<div class="sheet-cell sheet-col0"><input type="checkbox" class="sheet-boolean" name="attr_airoption" value="3"/></div><div class="sheet-cell sheet-col1"><span class="sheet-popup">Air Movement Mode.</span><span class="sheet-tooltip">Only used when character<br />is aquatic or amphibious.</span></div>
					</div>
					<div class="sheet-row sheet-row-stats">
						<div class="sheet-cell sheet-col0"><input type="checkbox" class="sheet-boolean" name="attr_spaceoption" value="4"/></div><div class="sheet-cell sheet-col1"><span class="sheet-popup">Space Movement Mode.</span><span class="sheet-tooltip">Only used when character<br />has an airmove</span></div>
					</div>
CSS:
input.sheet-boolean:not([value='1']) ~ div.sheet-groundmove {
  display: none;
}
input.sheet-boolean:not([value='1']) ~ div.sheet-watermove {
  display: none;
}
input.sheet-boolean:not([value='1']) ~ div.sheet-airmove {
  display: none;
}
input.sheet-boolean:not([value='1']) ~ div.sheet-spacemove {
  display: none;
}

You cannot have them all with the same class (sheet-boolean), and the same value (value=1). This absolutely will not work.

Can you post the code you attempted with different class names?

input.sheet-boolean .sheet-groundoption:not([value='1']) ~ div.sheet-groundmove {
  display: none;
}
input.sheet-boolean .sheet-wateroption:not([value='1']) ~ div.sheet-watermove {
  display: none;
}
input.sheet-boolean .sheet-airoption:not([value='1']) ~ div.sheet-airmove {
  display: none;
}
input.sheet-boolean .sheet-spaceoption:not([value='1']) ~ div.sheet-spacemove {
  display: none;
}

<input type="checkbox" class="sheet-boolean sheet-groundoption" name="attr_groundmove" value="1"/>
<input type="checkbox" class="sheet-boolean sheet-wateroption" name="attr_watermove" value="1"/>
<input type="checkbox" class="sheet-boolean sheet-airoption" name="attr_airmove" value="1"/>
<input type="checkbox" class="sheet-boolean sheet-spaceoption" name="attr_spacemove" value="1"/>

<input type="hidden" class="sheet-boolean" name="attr_groundoption" />
				<div class="sheet-groundmove">....
<input type="hidden" class="sheet-boolean" name="attr_wateroption" />
				<div class="sheet-watermove">...

Its the class of the hidden input that this method depends on, so change  the above to:

input type="checkbox" class="sheet-boolean" name="attr_groundmove" value="1"/>
<input type="checkbox" class="sheet-boolean" name="attr_watermove" value="1"/>
<input type="checkbox" class="sheet-boolean" name="attr_airmove" value="1"/>
<input type="checkbox" class="sheet-boolean" name="attr_spacemove" value="1"/>

The sheet-boolean class above is used purely for styling the checkboxes appearance, its not part of the process for displaying or hiding the div.

The inputs and divs should be something like:

<input type="hidden" class="sheet-groundoption" name="attr_groundoption" />
				<div class="sheet-groundmove">....
<input type="hidden" class="sheet-wateroption" name="attr_wateroption" />
				<div class="sheet-watermove">...
<input type="hidden" class="sheet-wateroption" name="attr_airoption" />
				<div class="sheet-airmove">...
<input type="hidden" class="sheet-wateroption" name="attr_spaceoption" />
				<div class="sheet-spacemove">...

So the CSS is staying like this?

input.sheet-boolean .sheet-groundoption:not([value='1']) ~ div.sheet-groundmove {
  display: none;
}

or is it this?

input.sheet-groundoption:not([value='1']) ~ div.sheet-groundmove {
  display: none;
}

Oh good catch, I didnt notice the sheet boolean in the css. The last one:

input.sheet-groundoption:not([value='1']) ~ div.sheet-groundmove {
  display: none;
}

Well it is working from another tab even. Thank you so much for your help.

You're welcome :) 

To everyone that is looking at this thread. What I have accomplished with G G's help is setting up an options box on one tab that reveals entries on another tab in the character sheet. This will allow the character sheet to be configurable, in this case, for different modes on movement by checking boxes on the options tab of this character sheet.

A key thing I learned here is that the visible checkbox is linked by "name" to a hidden checkbox and that is linked by CSS to the div class that I am revealing/hiding.

I believe it will be possible to also do this with radio buttons later as I attempt to set-up a hit location box that will have differing configurations based upon the body type such as bi-pedal, quadruped, and so-on. On the sheetworker side I plan to reflect this as well for combat automation.

Again many thanks to G G and Finderski for taking time out to help me get this done. I hope that my efforts on the GURPS character sheet will aid GM's and players on Roll20.

You can do the same kind of thing with select/radio buttons, the hidden input gets its value from the selected radio button, and the CSS uses the value of the hidden input in the same way. You'll have different values like

input.sheet-options:not([value='1']) ~ div.sheet-groundmove {
  display: none;
}

input.sheet-options:not([value='2']) ~ div.sheet-groundmove {
  display: none;
}

and so on.

That's kinda what I figured

Oops, had an error in my example code. Its fixed above. It's meant to be an example of how you can have the same class (there's only one hidden input, and you use its class), as long as you check for different values in the input.

Here's a spin on the above...your thoughts?

input.sheet-current:([value='0']) ~ div.sheet-none { color:red;}
input.sheet-current:([value='1']) ~ div.sheet-light { color:red;}
input.sheet-current:([value='2']) ~ div.sheet-med { color:red;}
input.sheet-current:([value='3']) ~ div.sheet-hvy { color:red;}
input.sheet-current:([value='4']) ~ div.sheet-xhvy { color:red;}
input.sheet-current:([value='5']) ~ div.sheet-max { color:red;}