Including a I can open and close

I'm hoping this is a simple addition. While testing out the character sheet I've been working on, one of my players suggested including a way to modify rolls and Abilities in the background based an on persistent disadvantage the character possesses. A lot of disadvantages are situational (phobias, for instance, give you a penalty to your fear roll when it applies), but some are persistent (lame reduces your Pace by 1...always). So what I've been thinking about is including an array of checkboxes that correspond to these persistent disadvantages that the player can go through and activate, and the sheet does all the heavy lifting. Thing is, this is going to take up a lot of space when a character will have, at the most, three disadvantages. So what I'd like to do is put them all in a section (a <div>) that I can open and close, kinda like a tab effect. The player could open it up when he/she creates a character, then clos it up and forget about it. I've already tabbed my sheet and don't want to include it in tha array. I want to tuck it away somewhere unobtrusive. I guess, in bad CSS-speak, I'm looking to create a collapsible wrapper that I can drop a 3-column section within. So how would I do that? Does my description make sense? I can whip up a mock up visual aid if its confusing. So far, I haven't seen anything like this on other sheets...though I may have just missed it. Thanks!

Collapsible sections work almost identically to tabbed sections. You can look at the D&D 4e sheet for a plethora of examples. The basics: <input type="checkbox" class="sheet-collapsing sheet-section1" name="attr_section1" value="1" /> <div class="sheet-collapsible sheet-section1">Some text</div> input[type=checkbox].sheet-collapsing.sheet-section1:checked ~ .sheet-collapsible.sheet-section1 { display: none; }

Hrm. That'll teach me to use brackets in Subject lines. :P Brain, thanks for the basics. I'm going to be experimenting with this a lot today. I have two sections now that I'm looking to include in collapsible sections. I've been looking around css tutorials on the subject and haven't found much that works without a javascript or JQuery component. I looked at the 4e DnD sheet and the only thing that I could see that was collapsible was the margins. Am I missing something? Was I looking at the wrong sheet? Can you give me some clues as to how to format this? For example, how do I get the checkbox to affix to the left side of the page. I added "align="left"" to the input box html, but that only seems to work when it is check, otherwise it is centered. I added "text-align: left;" to the css class definitions, but that didn't do anything. Also, if I wanted to put these sections in an bordered box with a gray background color, how might I go about doing that. Nothing fancy. I figure: border-style: solid; border-width: 1px; Box color: #F8F8F8 Thinking out loud, I figure this means I need to set up css for the input, plus a div class for the collapsing section. All the styling info needs to be in the section info. So in the code it would go something like: Collapsible Checkbox DIV collapsible section DIV actual content Right?

Tom, my Savage Worlds sheet does that. You can look at it at <a href="https://github.com/finderski/Roll20" rel="nofollow">https://github.com/finderski/Roll20</a> The section you'll want is near the bottom in the NPC sections.

Tom said: I looked at the 4e DnD sheet and the only thing that I could see that was collapsible was the margins. Am I missing something? Was I looking at the wrong sheet? No, you're just not poking it hard enough. =) The 4e sheet has collapsible sections, but the checkboxes are entirely hidden. Most of the title sections (the black boxes with text) can collapse the section they correspond to. Tom said: how do I get the checkbox to affix to the left side of the page. I added "align="left"" to the input box html, but that only seems to work when it is check, otherwise it is centered. I added "text-align: left;" to the css class definitions, but that didn't do anything. You probably want float: left for the checkbox. If the parent container has a value set for position: , you could also use position: absolute and left: 0 for the checkbox. Or, you could use position: relative for the checkbox and set values for left: and top: to move it where you like relative to its original position.

Brian said: No, you're just not poking it hard enough. =) The 4e sheet has collapsible sections, but the checkboxes are entirely hidden. Most of the title sections (the black boxes with text) can collapse the section they correspond to. You probably want float: left for the checkbox. If the parent container has a value set for position: , you could also use position: absolute and left: 0 for the checkbox. Or, you could use position: relative for the checkbox and set values for left: and top: to move it where you like relative to its original position. Well what do you know? They do. Of course, the CSS is so advanced on this one, I'm not even sure what I'm looking at. I suspect if the guy who developed it looked at my code, he'd rip his hair out and commit himself. :P I'll try float: left and see what happens. I just think it's weird that it works just fine in the example. Would this be a conflict with another piece of checkbox script? Also, I sent you a PM with some more specific questions.