Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Character sheet toggle/hidden options

I have seen it on other sheets where the information about an item or ability isn't shown unless it is toggled or checked, then alll the extra abilities or stats are revealed. Kind of like a mini tab within a page. How is this done?
1619467174
Finderski
Pro
Sheet Author
Compendium Curator
Like a Tab, you hide what you want hidden and show it only when the input is the value you want. Depending on how your sheet is set up, it may require having a duplicate, hidden version of the controlling input. Something like this: <input type="hidden" name="attr_my_control" value="show" /> <div class="sheet-myStuff"> Show this stuff </div> CSS: .sheet-myStuff { display: none; } input[value="show"] + .sheet-myStuff { display: block; }
Trying to wrap my brain around that.
1619529265
Finderski
Pro
Sheet Author
Compendium Curator
Essentially, you hide what you want to only show in certain situations.  Then you show it when that condition is met via the value of the hidden attribute.  Also, you can have  the input in multiple places, one to show it so the user can select it, and the others can all be hidden to modify the way the sheet works. BTW, value can be anything. So, without knowing what your input looks like, nor the values you want to control stuff that's hidden I just went with "show." If you shared some of your code, we might be able to give you a better working example.
1619532588

Edited 1619532744
What I want to show is in bold. The rest I want hidden unless toggled. where do I place the hidden values etc? <table></tr><tr>             <td class="bluehilite boldme">Name</td> <td class="bluehilite boldme alcenter">Hit</td> <td class="bluehilite boldme alcenter">Dmg</td> </tr><tr>             <td><input type="text" name="attr_WeaponName_2" class="medium" value="Empty" /></td>   <td>                <button type="roll" value="&{template:custom}{{title=@{CharacterName} @{WeaponName_2} Attack}}{{Attack Roll=[[1d20+@{bth}+@{WeaponHitMod_2}+@{WeaponHitMisc_2}+@{WeaponHitmagic_2}+@{OffensiveFocus}+@{Flank}+@{Rear}-(@{CalledShot}*8) +@{Sneak} +@{Enemy} +(@{Smite}*@{CharismaMod}) +@{Inspired} +@{Bless} +@{Exhort} +(@{BackAttack}*4) +@{MiscCombat} -@{Demoralize}]]}}{{Special=@{WeaponSpecial_2}}}" />                <button type="roll" value="&{template:custom}{{title=@{CharacterName} @{WeaponName_2} Damage}}{{Damage Roll=[[@{WeaponDmg_2}+@{WeaponDmgMod_2}+@{WeaponDmgMisc_2}+@{WeaponDmgMagic_2}+@{Charge}+(@{Sneak}*2)+(@{Marauder}*@{Level}*@{RangerClass}) +(@{Smite}*@{Level}*@{PaladinClass}) +(@{BackAttack}*@{WeaponDmg_2}) +(@{CalledShot}*@{WeaponDmg_2})+@{MiscDamage} +(@{Critical}*@{WeaponDmg_2}) ]]}}"/>             </td> </table> <table> </tr><tr>             <td class="bluehilite boldme alcenter">EV</td>             <td class="bluehilite boldme alcenter">Range</td>             <td class="bluehilite boldme alcenter">Ammo</td>             <td class="bluehilite boldme alcenter">Special</td>             <td class="bluehilite boldme alcenter">Trait</td>        </tr><tr>             <td><input type="number" name="attr_WeaponEV_2" class="short alcenter" value="0" /></td>             <td><input type="number" name="attr_WeaponRange_2" class="short alcenter" value="0" /></td>             <td><select name="attr_WeaponAmmo_2" STYLE="width: 75px;font-size: 10px" class="short alright">  <option value="Melee"  selected="selected">Melee</option>   <option value="Thrown" >Thrown</option>   <option value="Arrow" >Arrow</option>   <option value="Bolt" >Bolt</option>   <option value="Stone" >Stone</option> </select>               <td><select name="attr_WeaponSpec_2" STYLE="width: 50px;font-size: 10px" class="short alright">  <option value="0"  selected="selected">NA</option>   <option value="1" >1</option>   <option value="2" >2</option>   <option value="3" >3</option>   <option value="4" >4</option>   <option value="5" >5</option>   <option value="6" >6</option>   <option value="7" >7</option>   <option value="8" >8</option>   <option value="9" >9</option>   <option value="10" >10</option>   <option value="11" >11</option> </select></td>          <td><select name="attr_WeaponTrait_2" STYLE="width: 50px;font-size: 10px" class="short alright">  <option value="0"  selected="selected">NA</option>   <option value="*" >*</option>   <option value="@" >@</option>   <option value="*@" >*@</option> </select></table></td></td> </tr><tr><table>             <td class="bluehilite boldme alcenter">Attr</td>             <td class="bluehilite boldme alcenter">BtH +</td>             <td class="bluehilite boldme alcenter">Mod +</td>             <td class="bluehilite boldme alcenter">Misc +</td>             <td class="bluehilite boldme alcenter">Magic</td>             <td class="bluehilite boldme alcenter">= Total</td> </tr><tr>              <td><select name="attr_WeaponHitAttr_2" STYLE="width: 75px;font-size: 10px" class="short alright">  <option value="0"  selected="selected">NA</option>   <option value="1" >STR</option>   <option value="2" >DEX</option>   <option value="3" >CON</option>   <option value="4" >INT</option>   <option value="5" >WIS</option>   <option value="6" >CHA</option> </select></td>             <td><input type="number" name="attr_WeaponBth_2" class="short alcenter" value="0" /></td>             <td><input type="number" name="attr_WeaponHitMod_2" class="short alcenter" value="0" /></td>             <td><input type="number" name="attr_WeaponHitMisc_2" class="short alcenter" value="0" /></td>             <td><input type="number" name="attr_WeaponHitMagic_2" class="short alcenter" value="0" /></td>             <td><input type="number" name="attr_WeaponHitTotal_2" class="short alcenter" value="0"  /></td></table> </tr><tr><table>             <td class="bluehilite boldme alcenter">Attr</td>             <td class="bluehilite boldme alcenter">Dmg +</td>             <td class="bluehilite boldme alcenter">Mod +</td>             <td class="bluehilite boldme alcenter">Misc +</td>             <td class="bluehilite boldme alcenter">Magic</td>             <td class="bluehilite boldme alcenter">= Total</td> </tr>         <tr>  <td><select name="attr_WeaponDmgAttr_2" STYLE="width: 75px;font-size: 10px" class="short alright">  <option value="0"  selected="selected">NA</option>   <option value="1" >STR</option>   <option value="2" >DEX</option>   <option value="3" >CON</option>   <option value="4" >INT</option>   <option value="5" >WIS</option>   <option value="6" >CHA</option> </select></td>             <td><input type="text" name="attr_WeaponDmg_2" class="short alcenter" value="1d0" /></td>             <td><input type="number" name="attr_WeaponDmgMod_2" class="short alcenter" value="0"   /></td>             <td><input type="number" name="attr_WeaponDmgMisc_2" class="short alcenter" value="0" /></td>             <td><input type="number" name="attr_WeaponDmgMagic_2" class="short alcenter" value="0" /></td>             <td><input type="number" name="attr_WeaponDmgTotal_2" class="short alcenter" value="0"   /></td> </tr><tr>     </table>  
This is for Weapon_2 there are a total of 6 weapons currently on my sheet. So I would have to be able to hide six different entry sets.
1619533889
Finderski
Pro
Sheet Author
Compendium Curator
A few more questions... 1. Is this sheet going to be one shared with the community (i.e. submitted to git hub so it's a selected character sheet), or just for a personal game? If it's going to GitHub for the community, you'll need to change the structure to not use a tables. Just FYI 2. What toggles what? In looking at the bold section, I'm not seeing any inputs that I see as having an impact on the other areas.  So, if you could tell me what value should toggle one of the hidden sections and what the input name is that would be set to that value, that would be helpful. 3. Does a single value unhide the entire section that's hidden, or just certain sections? 4. Is there a reason you aren't using a repeating section for weapons? I'm assuming they all have the same basic structure...which could be a bad assumption...
1619542512

Edited 1619542669
1. Eventually, but that is a long time from now. I mean I wold actually want my sheetworkers to all, well, work before I even get to that point. I will probobly hire a HTML/CSS-Smith to clean it up and make it presentable LOL. Currently only a personal game. 2. I haven't added the toggle yet because I haven't been told yet what I need to do for that. From the sounds of it, I would probably add a radio or checkbox to accomplish this. Similar to the tabs at the top of my character sheet. 3. I would want all the stuff below the bold section to be hidden until the tab is toggled. 4. I just really don't like repeating sections. Maybe if I was more versed in coding I woudl be less hesistant about using them. I mean I would be fine with it if I was going to do all the actions/rolls from the character sheet but I personally (and I may be wrong) find to do macros (esepcailly powercards) without dealing with repeating sections.  Bonus round: Why are tables bad for github?
1619544692
Andreas J.
Forum Champion
Sheet Author
Translator
Peacekeeper B said: Bonus round: Why are tables bad for github? <a href="https://wiki.roll20.net/Building_Character_Sheets#2._Good_Code" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#2._Good_Code</a> they are hard to style and adjust, and are bad fir other than really tabular data. if a section have buttons in it, it ain't tabular data.
1619549862

Edited 1619550130
Well I am not tryong to tab buttons. Just the lines below the buttons.
This is a new rabbit hole. So what should I use in place of tables?
1619550749
Andreas J.
Forum Champion
Sheet Author
Translator
Peacekeeper B said: This is a new rabbit hole. So what should I use in place of tables? <a href="https://wiki.roll20.net/Designing_Character_Sheet_Layout" rel="nofollow">https://wiki.roll20.net/Designing_Character_Sheet_Layout</a>
1619555349

Edited 1619555394
Finderski
Pro
Sheet Author
Compendium Curator
Here's how you can get it to work with your current set up. HTML: &lt;table&gt; &lt;th&gt;&lt;td colspan="3"&gt;Show Stuff: &lt;input type="checkbox" name="attr_showToggle" value="1" class="showStuff" /&gt;&lt;/td&gt;&lt;/th&gt; &lt;tr&gt; &lt;td class="bluehilite boldme"&gt;Name&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Hit&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Dmg&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="text" name="attr_WeaponName_2" class="medium" value="Empty" /&gt;&lt;/td&gt; &lt;td&gt; &lt;button type="roll" value="&amp;{template:custom}{{title=@{CharacterName} @{WeaponName_2} Attack}}{{Attack Roll=[[1d20+@{bth}+@{WeaponHitMod_2}+@{WeaponHitMisc_2}+@{WeaponHitmagic_2}+@{OffensiveFocus}+@{Flank}+@{Rear}-(@{CalledShot}*8) +@{Sneak} +@{Enemy} +(@{Smite}*@{CharismaMod}) +@{Inspired} +@{Bless} +@{Exhort} +(@{BackAttack}*4) +@{MiscCombat} -@{Demoralize}]]}}{{Special=@{WeaponSpecial_2}}}"&gt;&lt;/button&gt; &lt;button type="roll" value="&amp;{template:custom}{{title=@{CharacterName} @{WeaponName_2} Damage}}{{Damage Roll=[[@{WeaponDmg_2}+@{WeaponDmgMod_2}+@{WeaponDmgMisc_2}+@{WeaponDmgMagic_2}+@{Charge}+(@{Sneak}*2)+(@{Marauder}*@{Level}*@{RangerClass}) +(@{Smite}*@{Level}*@{PaladinClass}) +(@{BackAttack}*@{WeaponDmg_2}) +(@{CalledShot}*@{WeaponDmg_2})+@{MiscDamage} +(@{Critical}*@{WeaponDmg_2}) ]]}}"&gt;&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;input type="hidden" name="attr_showToggle" value="0" class="showStuff" /&gt; &lt;table class="hiddenTable" &gt; &lt;tr&gt; &lt;td class="bluehilite boldme alcenter"&gt;EV&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Range&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Ammo&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Special&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Trait&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponEV_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponRange_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;td&gt; &lt;select name="attr_WeaponAmmo_2" STYLE="width: 75px;font-size: 10px" class="short alright"&gt; &lt;option value="Melee" selected="selected"&gt;Melee&lt;/option&gt; &lt;option value="Thrown" &gt;Thrown&lt;/option&gt; &lt;option value="Arrow" &gt;Arrow&lt;/option&gt; &lt;option value="Bolt" &gt;Bolt&lt;/option&gt; &lt;option value="Stone" &gt;Stone&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select name="attr_WeaponSpec_2" STYLE="width: 50px;font-size: 10px" class="short alright"&gt; &lt;option value="0" selected="selected"&gt;NA&lt;/option&gt; &lt;option value="1" &gt;1&lt;/option&gt; &lt;option value="2" &gt;2&lt;/option&gt; &lt;option value="3" &gt;3&lt;/option&gt; &lt;option value="4" &gt;4&lt;/option&gt; &lt;option value="5" &gt;5&lt;/option&gt; &lt;option value="6" &gt;6&lt;/option&gt; &lt;option value="7" &gt;7&lt;/option&gt; &lt;option value="8" &gt;8&lt;/option&gt; &lt;option value="9" &gt;9&lt;/option&gt; &lt;option value="10" &gt;10&lt;/option&gt; &lt;option value="11" &gt;11&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select name="attr_WeaponTrait_2" STYLE="width: 50px;font-size: 10px" class="short alright"&gt; &lt;option value="0" selected="selected"&gt;NA&lt;/option&gt; &lt;option value="*" &gt;*&lt;/option&gt; &lt;option value="@" &gt;@&lt;/option&gt; &lt;option value="*@" &gt;*@&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table class="hiddenTable" &gt; &lt;tr&gt; &lt;td class="bluehilite boldme alcenter"&gt;Attr&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;BtH +&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Mod +&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Misc +&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Magic&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;= Total&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;select name="attr_WeaponHitAttr_2" STYLE="width: 75px;font-size: 10px" class="short alright"&gt; &lt;option value="0" selected="selected"&gt;NA&lt;/option&gt; &lt;option value="1" &gt;STR&lt;/option&gt; &lt;option value="2" &gt;DEX&lt;/option&gt; &lt;option value="3" &gt;CON&lt;/option&gt; &lt;option value="4" &gt;INT&lt;/option&gt; &lt;option value="5" &gt;WIS&lt;/option&gt; &lt;option value="6" &gt;CHA&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponBth_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponHitMod_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponHitMisc_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponHitMagic_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponHitTotal_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table class="hiddenTable" &gt; &lt;tr&gt; &lt;td class="bluehilite boldme alcenter"&gt;Attr&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Dmg +&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Mod +&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Misc +&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;Magic&lt;/td&gt; &lt;td class="bluehilite boldme alcenter"&gt;= Total&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;select name="attr_WeaponDmgAttr_2" STYLE="width: 75px;font-size: 10px" class="short alright"&gt; &lt;option value="0" selected="selected"&gt;NA&lt;/option&gt; &lt;option value="1" &gt;STR&lt;/option&gt; &lt;option value="2" &gt;DEX&lt;/option&gt; &lt;option value="3" &gt;CON&lt;/option&gt; &lt;option value="4" &gt;INT&lt;/option&gt; &lt;option value="5" &gt;WIS&lt;/option&gt; &lt;option value="6" &gt;CHA&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type="text" name="attr_WeaponDmg_2" class="short alcenter" value="1d0" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponDmgMod_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponDmgMisc_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponDmgMagic_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="number" name="attr_WeaponDmgTotal_2" class="short alcenter" value="0" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; CSS: table.hiddenTable { display: none; } .showStuff[value="1"] ~ .hiddenTable { display: block; } NOTE : The original HTML had some bad formatting; for example, your rows seemed to start with &lt;/tr&gt; which is how rows are closed, not started. I don't know if you're intention is to have tables inside of tables or not, but I did it a different way, where I removed the tables from rows (because I couldn't tell how it was supposed to be). &nbsp;If you want tables inside of rows, then the code may need to be modified slightly to include more than one additional input field next to the stuff you want to show. This also assumes you do NOT have the Legacy Sanitization checkbox checked.
Wow. Thanks. So....if I have legacy sanitation checked, how much trouble am i in?
1619561998
Andreas J.
Forum Champion
Sheet Author
Translator
Peacekeeper B said: So....if I have legacy sanitation checked, how much trouble am i in? The CSS is unlikely to work. <a href="https://wiki.roll20.net/Legacy_Sheet" rel="nofollow">https://wiki.roll20.net/Legacy_Sheet</a>
And if I check it on the rest of my sheet will need to be rewritten.&nbsp;
1619562308
Andreas J.
Forum Champion
Sheet Author
Translator
table.sheet-hiddenTable { display: none; } .sheet-showStuff[value="1"] ~ .sheet-hiddenTable { display: block; } change the css to this, and it will probably work.
1619572616

Edited 1619572806
It works. You are all brilliant geniuses. I'm going to play around with it now so I understand it more. Do I need to tweak the css for each weapon or will one cover them all?
1619574224
Finderski
Pro
Sheet Author
Compendium Curator
As long as you use the sam classes on the input fields and tables, it should just work for all them. &nbsp;You would want to have different names for each input, but they can all share the same class. The only gotcha would be if they are all at the same level, then it might be bleed down, but if each set of tables are in their own divs, then you should be good. &nbsp;It all just depends on how you've constructed the rest of the sheet and how they all line up.
Bonus round 2: could I do this with a dropdown menu? Instead of checkbox?
1619738501
Finderski
Pro
Sheet Author
Compendium Curator
Yes. You'd still need the hidden input field, you'd just make the appropriate adjustments for the value.
Cool. I appreciate all the help. I think I finally have this part down. Lol.
Final Jeopardy.&nbsp;&nbsp; Can this be done with multiple conditions? Say class (paladin) and level (3).For example I don't want a paladins ability to turn undead to show up until the paladin is third level.
1620033793
Finderski
Pro
Sheet Author
Compendium Curator
Yes, but it would require some thought and understanding how you're setting up the character sheet, etc. Are all spells broken out by class? Are they broken out by level? For example if all your Paladin stuff is one "container" I'd take a two step approach by showing the Paladin container when the class Paladin is selected and then have all the spell stuff in sub-containers that would show when the appropriate level is reached. The problem with that approach, of course, is if Paladins and Wizards and Druids all have the Light spell, then that spell would be in there three different times in three different containers, etc. If you ever needed to update that spell, you'd have to remember to update it in different places. That being said, that's still the easiest solution I can think of at the moment. &nbsp;It would also just follow the same model you're currently using and nothing new/tricky to it, really.
1620052660

Edited 1620144343
Cool. How do I denote the level and value to trigger at level 3 (etc). Is it name="attr_Level" and value="3"?
1620136428
Finderski
Pro
Sheet Author
Compendium Curator
I'd probably use attr_level for the character input field, and the value as you have it specified...
Hey. Again I want to thank everyone for the help. The sheet is looking great. Just can't get the last part to work, the toggle within a toggle based on level. This is the code (below). Abilities 1 and 2 are available at 1st level so they don't need an extra toggle/hidden/reveal. But the 3rd ability is 2nd level, the 4th is 4th level, and the 5th ability is 6th level with modifiers at levels 7, 12, and 15. Right now I am just concerned with them revealing themselves at the right level. Level is attr_Level.&nbsp; &lt;div&gt; &lt;input type="hidden" name="attr_DruidClass" value="0" class="showStuff" /&gt; &lt;table class="hiddenTable"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial1}}}{{Druids have a secret language used for communicating with one another. They are forbidden from teaching this language to any but their brethren.}}{{Additionally, if a druid has a high enough intelligence to learn an additional language, the following languages are available to them: aquan, auran, elf, fey, giant, gnome, sylvan and terran. The druid must have lived in or near a community of those whose language they seek to learn.}}"/&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial1" width="125" STYLE="width: 125px" size="0" class="medium" value="Bonus Languages" disabled="true" /&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial2}}}{{Druids are connected to the forces of nature. They mystically coexist with their environment, gradually becoming a larger part of it. This relationship imparts to them a specialized knowledge of the wilds. A druid can identify plants and animals with perfect accuracy in the type of environment where the druid was trained or currently lives. In unfamiliar environments, the druid must succeed at a wisdom check to successfully use this ability..}}{{This identification ability allows the druid to determine the species of a plant or animal and the special qualities or abilities of the species. The druid can also determine whether water is safe or dangerous to drink. Additionally, druids can find shelter and forage for food. A druid always succeeds in finding basic shelter and enough food for individual daily sustenance. If the druid wishes to support additional people, they must spend 6 hours hunting and gathering to produce enough food and water to feed 2-8 people for a day. If the druid wishes to feed or shelter a larger group of people than the die indicate, a successful wisdom check is necessary. If successful, the druid must spend an additional 6 hours gathering food to feed and water an additional 2-8 people. A third attempt to gather food can be made. A wisdom check at -4 is made but if successful, another 6 hours of searching can feed an additional 1-4 people. This additional effort allows the druid to gather food and water for up to 5-20 creatures total. The druid can only hunt and forage for food three times per day.}}"/&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial2" width="125" STYLE="width: 125px" size="0" class="medium" value="Nature Lore" disabled="true" /&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial3}}}{{At 2nd level, druids gain a +2 bonus to saving throws against fire, water, earth, air, cold and lightning attacks.}}"/&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial3" width="125" STYLE="width: 125px" size="0" class="medium" value="Resist Elements" disabled="true" /&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial4}}}{{At 3rd level, druids gain the ability to move through natural thorns, briars, overgrown areas and similar terrain at normal speed and without suffering damage or other impairment. When doing so, druids leave no trail in the natural surroundings and cannot be tracked. However, thorns, briars and overgrown areas that are enchanted or magically manipulated to impede motion still affect druids.}}"/&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial4" width="125" STYLE="width: 125px" size="0" class="medium" value="Woodland Stride" disabled="true" /&gt;&lt;/td&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;tr&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial5}}}{{At 6th level, druids gain the spell-like ability to change into a small or medium-size animal and back again once per day. This ability operates like the spell polymorph self. Upon attaining this ability, a druid must choose a totem shape. The selection is permanent, and cannot be changed. Each time a druid uses this ability, the character regains 1d4 hit points.}}{{At 7th and 8th levels, the druid gains a new totem shape. Each shape can be assumed once per day. At 12th level, the druid gains the ability to take the shape of a large version of one of the previously chosen totem forms. This large form can be assumed once per day, and the druid can decide between the three forms each time this ability is used. When assuming the large version of a totem form, the druid heals 5d8 hit points. At 15th level, the druid can take a totem shape twice per day and at 18th level, three times per day.}}"/&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial5" width="125" STYLE="width: 125px" size="0" class="medium" value="Totem Shape" disabled="true" /&gt;&lt;/td&gt; &lt;/table&gt; &lt;/div&gt;
1620416060
Finderski
Pro
Sheet Author
Compendium Curator
You'll want something like this: HTML &lt;input type="number" name="attr_level" value="1" class="level" /&gt; &lt;div&gt; &lt;input type="hidden" name="attr_DruidClass" value="0" class="showStuff" /&gt; &lt;input type="hidden" name="attr_level" value="1" class="level" /&gt; &lt;table class="hiddenTable"&gt; &lt;tr&gt; &lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial1}}}{{Druids have a secret language used for communicating with one another. They are forbidden from teaching this language to any but their brethren.}}{{Additionally, if a druid has a high enough intelligence to learn an additional language, the following languages are available to them: aquan, auran, elf, fey, giant, gnome, sylvan and terran. The druid must have lived in or near a community of those whose language they seek to learn.}}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial1" width="125" STYLE="width: 125px" size="0" class="medium" value="Bonus Languages" disabled="true" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial2}}}{{Druids are connected to the forces of nature. They mystically coexist with their environment, gradually becoming a larger part of it. This relationship imparts to them a specialized knowledge of the wilds. A druid can identify plants and animals with perfect accuracy in the type of environment where the druid was trained or currently lives. In unfamiliar environments, the druid must succeed at a wisdom check to successfully use this ability..}}{{This identification ability allows the druid to determine the species of a plant or animal and the special qualities or abilities of the species. The druid can also determine whether water is safe or dangerous to drink. Additionally, druids can find shelter and forage for food. A druid always succeeds in finding basic shelter and enough food for individual daily sustenance. If the druid wishes to support additional people, they must spend 6 hours hunting and gathering to produce enough food and water to feed 2-8 people for a day. If the druid wishes to feed or shelter a larger group of people than the die indicate, a successful wisdom check is necessary. If successful, the druid must spend an additional 6 hours gathering food to feed and water an additional 2-8 people. A third attempt to gather food can be made. A wisdom check at -4 is made but if successful, another 6 hours of searching can feed an additional 1-4 people. This additional effort allows the druid to gather food and water for up to 5-20 creatures total. The druid can only hunt and forage for food three times per day.}}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial2" width="125" STYLE="width: 125px" size="0" class="medium" value="Nature Lore" disabled="true" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="druid2ndLevel"&gt; &lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial3}}}{{At 2nd level, druids gain a +2 bonus to saving throws against fire, water, earth, air, cold and lightning attacks.}}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial3" width="125" STYLE="width: 125px" size="0" class="medium" value="Resist Elements" disabled="true" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="druid4thLevel"&gt; &lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial4}}}{{At 3rd level, druids gain the ability to move through natural thorns, briars, overgrown areas and similar terrain at normal speed and without suffering damage or other impairment. When doing so, druids leave no trail in the natural surroundings and cannot be tracked. However, thorns, briars and overgrown areas that are enchanted or magically manipulated to impede motion still affect druids.}}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial4" width="125" STYLE="width: 125px" size="0" class="medium" value="Woodland Stride" disabled="true" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="druid5thLevel"&gt; &lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial5}}}{{At 6th level, druids gain the spell-like ability to change into a small or medium-size animal and back again once per day. This ability operates like the spell polymorph self. Upon attaining this ability, a druid must choose a totem shape. The selection is permanent, and cannot be changed. Each time a druid uses this ability, the character regains 1d4 hit points.}}{{At 7th and 8th levels, the druid gains a new totem shape. Each shape can be assumed once per day. At 12th level, the druid gains the ability to take the shape of a large version of one of the previously chosen totem forms. This large form can be assumed once per day, and the druid can decide between the three forms each time this ability is used. When assuming the large version of a totem form, the druid heals 5d8 hit points. At 15th level, the druid can take a totem shape twice per day and at 18th level, three times per day.}}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial5" width="125" STYLE="width: 125px" size="0" class="medium" value="Totem Shape" disabled="true" /&gt;&lt;/td&gt; &lt;/table&gt; &lt;/div&gt; CSS: .druid2ndLevel, .druid4thLevel, .druid5thLevel { display: none; } input:not([value="1"]).level ~ table .druid2ndLevel, input:not([value="1"]):not([value="2"]):not([value="3"]).level ~ table &gt; tbody &gt; .druid4thLevel, input:not([value="1"]):not([value="2"]):not([value="3"]):not([value="4"]):not([value="5"]).level ~ table &gt; tbody &gt; .druid5thLevel { display: table-row; }
Yikes. And I'll have to do that for every class. Wowza.&nbsp;
I appreciate the effort and attempt. But I couldn't get it to work. Could that be because I'm using legacy sheet parameters on my character sheet?
1620458952

Edited 1620458985
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator
Actually yeah, legacy sheets must have "sheet-" prefix on their CSS classes. So in Finderski's example those classes ought to be: .sheet-druid2ndLevel, .sheet-druid4thLevel, .sheet-druid5thLevel { display: none; } input:not([value="1"]).level ~ table .sheet-druid2ndLevel, input:not([value="1"]):not([value="2"]):not([value="3"]).level ~ table &gt; tbody &gt; .sheet-druid4thLevel, input:not([value="1"]):not([value="2"]):not([value="3"]):not([value="4"]):not([value="5"]).level ~ table &gt; tbody &gt; .sheet-druid5thLevel { display: table-row; }
1620472211
Finderski
Pro
Sheet Author
Compendium Curator
Richard T answered the legacy question already, but if you want to make that get up a little more generic, you could change the row classes to something like sheet-class2ndLevel, then the same CSS could apply to all classes and you wouldn't need so many CSS declarations.
Should the level ones be in their own &lt;div&gt;&lt;/div&gt; fields?
1620482763
Finderski
Pro
Sheet Author
Compendium Curator
They can be, but don't have to be if they are going to be displayed all the time. They just can't be in one of the containers with stuff that's going to be hidden initially.
1620487000
Andreas J.
Forum Champion
Sheet Author
Translator
Peacekeeper, I suggest you read more about how the ~ (general sibling combinator) works, to understand how and why the hide/show sections are structured as they are. Not understanding it is a common reason why some people have hard time wrapping their head around how to move beyond the basic hide/show examples to make own variations.
I'm doing as much research as I can but the examples are not very clear. I'm a visual guy. But I don't see or understand the patterns yet. You are correct though, if I took some introductory training maybe I would be better. Right now I'm trying to figure out why the excellent examples people have been kind enough to provide aren't working for me.
1620499795
Finderski
Pro
Sheet Author
Compendium Curator
So, what's currently not working? &nbsp;You're using Legacy sanitization (which is good to know, because my previous examples have been for the new CSE stuff, not Legacy). Have pre-pended all class names with "sheet-"? If not, that'll be part of the issue. The next bit would be to post HTML + CSS code that isn't working. &nbsp;It's harder to troubleshoot that stuff when we can't see what you're seeing/working with. :)
Html &lt;input type="number" name="attr_level" value="1" class="level" /&gt; &lt;div&gt; &lt;input type="hidden" name="attr_DruidClass" value="0" class="showStuff" /&gt; &lt;input type="hidden" name="attr_level" value="1" class="level" /&gt; &lt;table class="hiddenTable"&gt; &lt;tr&gt; &lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial1}}}{{Druids have a secret language used for communicating with one another. They are forbidden from teaching this language to any but their brethren.}}{{Additionally, if a druid has a high enough intelligence to learn an additional language, the following languages are available to them: aquan, auran, elf, fey, giant, gnome, sylvan and terran. The druid must have lived in or near a community of those whose language they seek to learn.}}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial1" width="125" STYLE="width: 125px" size="0" class="medium" value="Bonus Languages" disabled="true" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial2}}}{{Druids are connected to the forces of nature. They mystically coexist with their environment, gradually becoming a larger part of it. This relationship imparts to them a specialized knowledge of the wilds. A druid can identify plants and animals with perfect accuracy in the type of environment where the druid was trained or currently lives. In unfamiliar environments, the druid must succeed at a wisdom check to successfully use this ability..}}{{This identification ability allows the druid to determine the species of a plant or animal and the special qualities or abilities of the species. The druid can also determine whether water is safe or dangerous to drink. Additionally, druids can find shelter and forage for food. A druid always succeeds in finding basic shelter and enough food for individual daily sustenance. If the druid wishes to support additional people, they must spend 6 hours hunting and gathering to produce enough food and water to feed 2-8 people for a day. If the druid wishes to feed or shelter a larger group of people than the die indicate, a successful wisdom check is necessary. If successful, the druid must spend an additional 6 hours gathering food to feed and water an additional 2-8 people. A third attempt to gather food can be made. A wisdom check at -4 is made but if successful, another 6 hours of searching can feed an additional 1-4 people. This additional effort allows the druid to gather food and water for up to 5-20 creatures total. The druid can only hunt and forage for food three times per day.}}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial2" width="125" STYLE="width: 125px" size="0" class="medium" value="Nature Lore" disabled="true" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="druid2ndLevel"&gt; &lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial3}}}{{At 2nd level, druids gain a +2 bonus to saving throws against fire, water, earth, air, cold and lightning attacks.}}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial3" width="125" STYLE="width: 125px" size="0" class="medium" value="Resist Elements" disabled="true" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="druid4thLevel"&gt; &lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial4}}}{{At 3rd level, druids gain the ability to move through natural thorns, briars, overgrown areas and similar terrain at normal speed and without suffering damage or other impairment. When doing so, druids leave no trail in the natural surroundings and cannot be tracked. However, thorns, briars and overgrown areas that are enchanted or magically manipulated to impede motion still affect druids.}}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial4" width="125" STYLE="width: 125px" size="0" class="medium" value="Woodland Stride" disabled="true" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="druid5thLevel"&gt; &lt;td&gt;&lt;button type="roll" value="/w @{Charactername} &amp;{template:custom}{{title=@{druidspecial5}}}{{At 6th level, druids gain the spell-like ability to change into a small or medium-size animal and back again once per day. This ability operates like the spell polymorph self. Upon attaining this ability, a druid must choose a totem shape. The selection is permanent, and cannot be changed. Each time a druid uses this ability, the character regains 1d4 hit points.}}{{At 7th and 8th levels, the druid gains a new totem shape. Each shape can be assumed once per day. At 12th level, the druid gains the ability to take the shape of a large version of one of the previously chosen totem forms. This large form can be assumed once per day, and the druid can decide between the three forms each time this ability is used. When assuming the large version of a totem form, the druid heals 5d8 hit points. At 15th level, the druid can take a totem shape twice per day and at 18th level, three times per day.}}" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" name="attr_druidspecial5" width="125" STYLE="width: 125px" size="0" class="medium" value="Totem Shape" disabled="true" /&gt;&lt;/td&gt; &lt;/table&gt; &lt;/div&gt; Css .sheet-druid2ndLevel, .sheet-druid4thLevel, .sheet-druid5thLevel { display: none; } input:not([value="1"]).level ~ table .sheet-druid2ndLevel, input:not([value="1"]):not([value="2"]):not([value="3"]).level ~ table &gt; tbody &gt; .sheet-druid4thLevel, input:not([value="1"]):not([value="2"]):not([value="3"]):not([value="4"]):not([value="5"]).level ~ table &gt; tbody &gt; .sheet-druid5thLevel { display: table-row; }
The noted skills/levels are not shown even if the level is adjusted to the right value&nbsp;
1620502008
Finderski
Pro
Sheet Author
Compendium Curator
Easy fix, your CSS has an error...the level class doesn't doesn't have sheet- prepended... .sheet-druid2ndLevel, .sheet-druid4thLevel, .sheet-druid5thLevel { display: none; } input:not([value="1"]). sheet- level ~ table .sheet-druid2ndLevel, input:not([value="1"]):not([value="2"]):not([value="3"]). sheet- level ~ table &gt; tbody &gt; .sheet-druid4thLevel, input:not([value="1"]):not([value="2"]):not([value="3"]):not([value="4"]):not([value="5"]). sheet- level ~ table &gt; tbody &gt; .sheet-druid5thLevel { display: table-row; } See the bolded stuff...
Thank you all so much. It works brilliantly! Now that I have a working copy I will be able to troubleshoot on my own. Until my next big issue (Muahahahah!)