Is there a way to toggle the visibility of a class="sheet-col"

Looking for a way to toggle the visibility of a sheet-col. Here's the code- <div class="sheet-col" style="visibility:hidden;"> <h2 class="subsection">Continuum</h2> <table width="100%"> <tbody> <tr> <th>Date of Invitation:</th><td colspan ="3"><input type="text" name="attr_DateOfInvitation"></td> </tr> <tr> <th>Corner:</th><td colspan ="3"><input type="text" name="attr_Corner"></td> </tr> <tr> <th>Fraternity:</th> <td colspan ="3"> <select name="attr_Fraternity"> <option selected></option> <option>None</option> <option>Antiquarians</option> <!--<option>Dreamers</option>--> <option>Engineers</option> <option>Foxhorn</option> <option>Midwives</option> <option>Moneychangers</option> <option>Physicians</option> <option>Quicker</option> <option>Scribes</option> <option>Thespians</option> </select> </td> </tr> </tbody> </table> </div> I'm looking to hook it into a button or checkbox, with the visibility on/off.

The CSS Wizardry page have several examples of how to toggle or swap visible areas.

Thanks Andreas, There was indeed some very nice examples. I tried the one I thought might suit my sheet best, and while it works in the JSFiddle simulator it doesn't work in the sheet in Roll20. Here's the bits I used- input.toggle-show:not(:checked) ~ div.continuum { display: none; } and then in the HTML <input type="checkbox" class="toggle-show"> <div class="sheet-col continuum"> <h2 class="subsection">Continuum</h2> <table width="100%"> <tbody> ...etc I have no idea why this isn't working. Did I do something wrong?

classes in css must be prefixed with sheet-, so try input.sheet-toggle-show:not(:checked) ~ div.sheet-continuum { display: none; }

Tuck S. said: input.toggle-show:not(:checked) ~ div.continuum { display: none; } Try this: input.toggle-show:not(:checked) ~ div.sheet-continuum { display: none; }

That did it. Another obscure (documented?) rule. Thanks!

No, you just missed the sheet- portion on the div.continuum bit.  In the CSS all classes must start with sheet-

yeah, rules. So how come the  <input type="checkbox" class="toggle-show"> has to go into the line immediately above the <div> that it's toggling? Because I'd really rather put it elsewhere on the sheet. Like right at the top.

The ~ in the CSS rule is called a sibling selector: here sibling means "in the same block and at the same level of the CSS hierarchy" So this  input.toggle-show:not(:checked) ~ div.sheet-continuum is saying, "when this sheet-toggle-show input is not checked, apply the following style to any div named sheet-continuum, in the same block and at the same level. The way to move your checkbox, is use hidden attributes. Put your checkbox at the start of the sheet, or wherever, and give it a value. <input type="checkbox" name="whatever" value="1" /> Note that the class can be anything. Then where the checkbox used to be, put this input: <input type="hidden" class="toggle-show" name="whatever" value="1" /> Note that this hidden input is the one that needs the style. And it must have the same name as the first checkbox input. And finally change your CSS style to use value not checked, like so input.sheet-toggle-show[value="0"] ~ div.sheet-continuum {

GiGs said: classes in css must be prefixed with sheet-, so try input.sheet-toggle-show:not(:checked) ~ div.sheet-continuum { display: none; } Tuck S. said: That did it. Another obscure (documented?) rule. Thanks! This is now probably the most well-documented quirk on Roll20 character sheets. It's mentioned in the Restrictions and the Common Mistakes -sections of the Building Character Sheets . I now also added a mention of this in the CSS -section, so it will be even harder to miss for future readers. But it's a good observation that some of the CSS Wizardry -examples don't have the sheet- prefix in the example code as they are made to work with the JSFiddle page. I guess we should be rewriting the examples to have the sheet- prefix in both the HTML & CSS so that the work out-of-the-box on both JSFiddle and in a Roll20 character sheet. I warmly recommend you take a new look at the "Building Character Sheets"-article, as I've recently updated several parts of it recently. Most pitfalls and common quirks are documented on it, and it links to essentially every relevant Roll20 documentation as well as general HTML/CSS/JavaScript resources. Edit: I edited the Show/Hide Area -example & JSFiddle to have the sheet- prefix. Other examples on the page seems to have them.

GiGs, Andreas, thanks very very much for the easy to understand followup. Andreas, I'm sure those pages are going to help immensely. I'm already feeling a growing sense of confidence as I flail around in this HTML / CSS code. The generous help from people like you makes it easier.

It's a learning curve, to be sure, but things gradually start to make sense.

Hey GiGs, I've tried to get this one without help, but I've failed. I added your suggestions, and while the button is there and I think I did it right, I'm getting no response from the switch. Here's he code- <input type="checkbox" name="continuumdeets" value="1" /> <div class="sheet-personal"> <h1 class="sheet-section">Personal Data</h1> <div class="sheet-3colrow"> <div class="sheet-col"> <h2 class="subsection">Description</h2> <table width="100%"> <tbody> <tr> <th>Name:</th><td colspan="3"><input type="text" name="attr_Name"></td> </tr> ..... </tbody> </table> </div> <div class="sheet-col"> <h2 class="subsection">Locality</h2> <table width="100%"> <tbody> <tr> <th>Date of Birth:</th><td><input type="text" name="attr_DateOfBirth"></td> </tr> ..... </tbody> </table> </div> <input type="hidden" class="toggle-show" name="continuumdeets" value="1" /> <div class="sheet-col sheet-block-b"> <h2 class="subsection">Continuum</h2> <table width="100%"> <tbody> <tr> <th>Date of Invitation:</th><td colspan ="3"><input type="text" name="attr_DateOfInvitation"></td> </tr> ...... </tbody> </table> </div> </div> and then the css is- input.sheet-switch[value="all"]:checked ~ div.sheet-yet, input.sheet-switch[value="all"]:checked ~ div.sheet-spanning, input.sheet-toggle-show[value="0"] ~ div.sheet-continuumdeets { display: none; } I assume once again I've missed / not understood something.

There's a couple of things Attribute names always must begin with "attr_" The name is not used in the CSS, its only used to link the checkbox and the hidden attribute. In the CSS you use the class, and your sheet-continuumdeets in the CSS doesnt have a matching class in the html. For the html try <input type="checkbox" name="attr_continuumdeets" value="1" /> <div class="sheet-personal"> <h1 class="sheet-section">Personal Data</h1> <div class="sheet-3colrow"> <div class="sheet-col"> <h2 class="subsection">Description</h2> <table width="100%"> <tbody> <tr> <th>Name:</th><td colspan="3"><input type="text" name="attr_Name"></td> </tr> ..... </tbody> </table> </div> <div class="sheet-col"> <h2 class="subsection">Locality</h2> <table width="100%"> <tbody> <tr> <th>Date of Birth:</th><td><input type="text" name="attr_DateOfBirth"></td> </tr> ..... </tbody> </table> </div> <input type="hidden" class="toggle-show" name="attr_continuumdeets" value="1" /> <div class="sheet-col sheet-block-b sheet-continuum"> <h2 class="subsection">Continuum</h2> <table width="100%"> <tbody> <tr> <th>Date of Invitation:</th><td colspan ="3"><input type="text" name="attr_DateOfInvitation"></td> </tr> ...... </tbody> </table> </div> </div> And in the CSS input.sheet-switch[value="all"]:checked ~ div.sheet-yet, input.sheet-switch[value="all"]:checked ~ div.sheet-spanning, input.sheet-toggle-show[value="0"] ~ div.sheet-continuum { display: none; }