Request help for HTML 'collapse text' function

Hi all, I'm trying to improve my Monster of the Week sheet and want to place some collapsible text on the sheet so people can see the starting options for the character, then hide it so it doesn't take up space once finished.  Looking online I have tried this code:  <div> <button type="button" data-toggle="collapse" data-target="#demo">Simple collapsible</button> <div id="demo"> [text here] </div> </div> This produces a button which is clickable, but doesn't actually  do anything, the text does not collapse. Can anyone help me find what is wrong or give me some code that will work as I am not a software programmer. (I'm amazed I got this far). Also I don't want it to only be text, it was have lists of options etc so I just need a collapsible section that I can put anything into. Thanks all (again)

You cannot use id's on roll20 since they would effect all sheets in the game. <a href="https://wiki.roll20.net/Building_Character_Sheets#" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#</a>... Here's a css example of hiding areas. <a href="https://wiki.roll20.net/CSS_Wizardry#Hide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Hide_Areas</a> I believe you can "simulate" a button by using pseudo elements&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Styling_Check" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Styling_Check</a>...

Thanks

This from the link also does not work unless I'm doing it wrong &lt;div&gt; &lt;input type="checkbox"&gt; &lt;h4&gt;Stuff and Things&lt;/h4&gt; &lt;div&gt; &lt;input type="text" placeholder="Name" name="attr_name"&gt;&lt;br&gt; &lt;input type="text" placeholder="Description" name="attr_description"&gt; &lt;input type="number" min="0" max="20" value="0" name="attr_level"&gt;&lt;br&gt; &lt;textarea placeholder="Fulltext" name="attr_bio"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt;

Can you post your relevant css and html&nbsp; that will help figure out what's not working and how to fix it.&nbsp; Thanks

for html the first checkbox should be something lke &lt;input type="checkbox" name="attr_hideinstructions" class="sheet-hide-next-div" value="1" /&gt; hide next area! then in css something like this (not tested) .sheet-hide-next-div:checked ~ div { display:none; }

So here is my CSS. It's basically a sheet where you choose the class you want and then the sheet for that class comes up:&nbsp; div.sheet-Null, div.sheet-Chosen, div.sheet-Crooked, div.sheet-Divine, div.sheet-Expert, [[etc]] div.sheet-Custom { display: none; } input[type="radio"][value="0"]:checked ~ div.sheet-Null, input[type="radio"][value="1"]:checked ~ div.sheet-Chosen, input[type="radio"][value="2"]:checked ~ div.sheet-Crooked, [[etc]] input[type="radio"][value="99"]:checked ~ div.sheet-Custom { display: block; } select.sheet-SkinSelect { position: relative; top: 4px; } option.sheet-SkinSelect:checked { display: none; } What I want is for a portion within each of those class sheets to be collapsible once people have chosen their starting stats. I have no current html for the collapsing section- that's what I'm trying to figure out, but the start is choosing a class:&nbsp; &lt;div&gt; &lt;p align="center"&gt;&lt;div&gt;&lt;p align="center"&gt; &lt;b&gt;&lt;i&gt;Name:&lt;/i&gt;&lt;/b&gt; &lt;input type="text" name="attr_CharName" /&gt; &lt;b&gt;&lt;i&gt;Gender:&lt;/i&gt;&lt;/b&gt; &lt;input type="text" name="attr_Gender"&gt; &lt;b&gt;&lt;i&gt;Playbook:&lt;/i&gt;&lt;/b&gt; &lt;select name="attr_SkinName" &gt; &lt;option value="0" checked="checked"&gt; Choose A Playbook&lt;/option&gt; &lt;option value="1"&gt; The Chosen&lt;/option&gt; [[etc]] &lt;option value="99"&gt; Custom Playbook&lt;/option&gt; &lt;/select&gt; &lt;/p&gt;&lt;/div&gt; &lt;div&gt;&lt;p align="center"&gt;&lt;b&gt;&lt;i&gt;Look:&lt;/i&gt;&lt;/b&gt; &lt;input type="text" name="attr_Look" style="width: 750px"&gt;&lt;br&gt; &lt;/div&gt; &lt;input type="radio" name="attr_SkinCheck" value="0" checked="checked"&gt; &lt;input type="radio" name="attr_SkinCheck" value="1"&gt;&nbsp; [[etc]] &nbsp;&lt;input type="radio" name="attr_SkinCheck" value="99"&gt; &lt;div&gt;&lt;p align="center"&gt;🕷&lt;b&gt;&lt;i&gt;Select a Playbook above to get started&lt;/i&gt;&lt;/b&gt;🕷&lt;/p&gt;&lt;/div&gt; Then once they choose a class the relevant sheet comes up and what I want is for the collapsible portion to be ther so they choose Class A and the starting options for class A come up (stats, look, etc) then they can fill in which options they choose and collapse it so that it doesn't take up space: &lt;div name="sheet-Chosen"&gt; [[Collapsible portion here]] &lt;div&gt;&lt;p align="center"&gt; [[character sheet is here]]

I've had more success with the "not" version of CSS values for this. First, either create a hidden attribute and stick it at the start of your sheet: &lt;input type="hidden" name="attr_SkinCheck" class="toggle-playbook" value="0"&gt; or add the class to each of your skincheck radio buttons. You need that class for the bit below. You will need to put all the skinchecks inside a styled div, like say &lt;div class="sheet-skinselections"&gt; You'll need a checkbox or some thing to allow you to switch between the selections and character sheet. So maybe the html will look something like this. Note those 99 radio buttons you had have been removed, and replaced with divs. &lt;input type="hidden" name="attr_SkinCheck" class="toggle-playbook" value="1"&gt; &lt;div&gt; &lt;p align="center"&gt;&lt;div&gt;&lt;p align="center"&gt; &lt;b&gt;&lt;i&gt;Name:&lt;/i&gt;&lt;/b&gt; &lt;input type="text" name="attr_CharName" /&gt; &lt;b&gt;&lt;i&gt;Gender:&lt;/i&gt;&lt;/b&gt; &lt;input type="text" name="attr_Gender"&gt; &lt;b&gt;&lt;i&gt;Playbook:&lt;/i&gt;&lt;/b&gt; &lt;select name="attr_SkinName" class="toggle-playbook"&gt; &lt;!-- add class here for CSS --&gt; &lt;option value="0" checked="checked"&gt; Choose A Playbook&lt;/option&gt; &lt;!-- does checked=checked work here? I've never tried that. --&gt; &lt;option value="1"&gt; The Chosen&lt;/option&gt; [[etc]] &lt;option value="99"&gt; Custom Playbook&lt;/option&gt; &lt;/select&gt; &lt;/p&gt;&lt;/div&gt; &lt;div&gt;&lt;p align="center"&gt;&lt;b&gt;&lt;i&gt;Look:&lt;/i&gt;&lt;/b&gt; &lt;input type="text" name="attr_Look" style="width: 750px"&gt;&lt;br&gt; &lt;/div&gt; &lt;div class="sheet-playbook0"&gt; &lt;!-- add class here for CSS --&gt; &lt;!-- list some instructions here, this is what will show up by default with 0 in the select. --&gt; &lt;/div&gt; &lt;div class="sheet-playbook1"&gt; &lt;!-- add class here for CSS --&gt; &lt;/div&gt; &lt;div class="sheet-playbook2"&gt; &lt;/div&gt; &lt;!-- and so on --&gt; &lt;div class="sheet-playbook99"&gt; &lt;/div&gt; Each playbook will need to be inside its own named div, like &lt;div class="sheet-playbook1"&gt; Obviously you can switch them to "sheet-Chosen" and so on, just make sure they are matched up with their values in the select for the CSS below Then in CSS, input.toggle-playbook:not([value='0']) ~ div.sheet-playbook0, // you might use "0" for some instructions input.toggle-playbook:not([value='1']) ~ div.sheet-playbook1, input.toggle-playbook:not([value='2']) ~ div.sheet-playbook2, ... etc input.toggle-playbook:not([value='99']) ~ div.sheet-playbook99 { display: none; } With this approach, if I've got my code right, whenever you select a playbook in the selection drop down, that playbook's div will become visible.&nbsp;

G G said: I've had more success with the "not" version of CSS values for this. GG, I'm just ignorant (go figure) ;-P would you mind elaborating a little? input.toggle-playbook:not([value='0']) ~ div.sheet-playbook0 {display:none;}&nbsp; vs&nbsp; input[value="0"].toggle-playbook:checked ~ div.sheet-playbook0 {display:block;} I believe that's the right syntax... Won't they accomplish the same thing? Thanks

Does this hide or show the whole sheet? Because I only want a portion of the sheet to be hidden and it's different info for every sheet. At the moment you choose a playbook and that playbook's info comes up.&nbsp; What I want is a portion within that which is collapsible for certain info

Here's a generic code you can use for collapsible sections (change the bold name to match every instance, unless you want them all to be collapsed or be shown at the same time, which would be fine for playbook details, since you're only ever going to see one of them). Just put this wherever you want it to be. Depending on how you want it to look, you can of course tweak it, but this should be a base for you to work from. &lt;input type="checkbox" class="sheet-hider" name="attr_ show_details " value="1" checked="checked"&gt;&lt;span&gt;Show details?&lt;/span&gt; &lt;div&gt; &lt;!-- your content --&gt; &lt;/div&gt; CSS: .sheet-hider:not(:checked) + span + div { display: none; } GG, I'm just ignorant (go figure) ;-P would you mind elaborating a little? input.toggle-playbook:not([value='0']) ~ div.sheet-playbook0 {display:none;} vs input[value="0"].toggle-playbook:checked ~ div.sheet-playbook0 {display:block;} I believe that's the right syntax... Won't they accomplish the same thing? There's two different things going on here: 1) GG is using a hidden input instead of checkboxes, so that it's possible to use a selector with [value="xxx"] instead of :checked - this means that only one input is necessary, instead of having to have a different input for every tab (which is fine if the tab radios are siblings to the tabs anyway, but painful if they're not). 2) GG is using the :not() instead of first setting display:none and then resetting it if it should be displayed, which makes for shorter and easier-to-debug code (If you do not &nbsp;use :not(), you will always have to have 2 CSS rules: one setting display:none for every element by default, and one that resets the display property to block (or something else) under the right conditions. :not() allows you to only have one rule).

Jakob explained it better than I could. since I'm still learning CSS too :)

G G said: Jakob explained it better than I could. since I'm still learning CSS too :) So am I. :) As an aside, I would recommend that you give a descriptive value to your tab radios/select options instead of a number ... e.g. value="chosen" instead of value="1" etc in the HTML, and corresponding changes in the CSS. That saves you the need to keep track of which number belongs to which playbook... . Of course, this is a bit more problematic if this is a sheet that has already been published, since the choice does not transfer for existing sheets without some extra work.

Thanks for the extra explanation.&nbsp; I often use the hidden input method.&nbsp; I don't have to work as hard when creating a bunch of selector rules to the various elements I want to hide.&nbsp;

Thanks very much everyone.&nbsp; Jakob you are amazing, the code worked perfectly and now I can make my sheets much more user friendly so they won't need the paper sheets to get set up with characters. You're all great.&nbsp; /topic closed