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?
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?
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; }
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.
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.
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...
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?
Peacekeeper B said:
Bonus round: Why are tables bad for github?
https://wiki.roll20.net/Building_Character_Sheets#2._Good_Code
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.
Here's how you can get it to work with your current set up.
HTML:
<table> <th><td colspan="3">Show Stuff: <input type="checkbox" name="attr_showToggle" value="1" class="showStuff" /></td></th> <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> <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}) ]]}}"></button> </td> </tr> </table> <input type="hidden" name="attr_showToggle" value="0" class="showStuff" /> <table class="hiddenTable"> <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> <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> </td> </tr> </table> <table class="hiddenTable"> <tr> <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> </tr> </table> <table class="hiddenTable"> <tr> <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> </tr> <tr> <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> </table>
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 </tr> 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). 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.
Peacekeeper B said:
So....if I have legacy sanitation checked, how much trouble am i in?
The CSS is unlikely to work. https://wiki.roll20.net/Legacy_Sheet
table.sheet-hiddenTable { display: none; } .sheet-showStuff[value="1"] ~ .sheet-hiddenTable { display: block; }
change the css to this, and it will probably work.
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?
As long as you use the sam classes on the input fields and tables, it should just work for all them. 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. It all just depends on how you've constructed the rest of the sheet and how they all line up.
Final Jeopardy.
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.
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. It would also just follow the same model you're currently using and nothing new/tricky to it, really.
Cool. How do I denote the level and value to trigger at level 3 (etc). Is it name="attr_Level" and value="3"?
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.
<div>
<input type="hidden" name="attr_DruidClass" value="0" class="showStuff" />
<table class="hiddenTable">
</tr>
<tr>
<td><button type="roll" value="/w @{Charactername} &{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.}}"/>
</td>
<td><input type="text" name="attr_druidspecial1" width="125" STYLE="width: 125px" size="0" class="medium" value="Bonus Languages" disabled="true" /></td>
</tr>
<tr>
<td><button type="roll" value="/w @{Charactername} &{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.}}"/>
</td>
<td><input type="text" name="attr_druidspecial2" width="125" STYLE="width: 125px" size="0" class="medium" value="Nature Lore" disabled="true" /></td>
</tr>
<tr>
<td><button type="roll" value="/w @{Charactername} &{template:custom}{{title=@{druidspecial3}}}{{At 2nd level, druids gain a +2 bonus to saving throws against fire, water, earth, air, cold and lightning attacks.}}"/>
</td>
<td><input type="text" name="attr_druidspecial3" width="125" STYLE="width: 125px" size="0" class="medium" value="Resist Elements" disabled="true" /></td>
</tr>
<tr>
<td><button type="roll" value="/w @{Charactername} &{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.}}"/>
</td>
<td><input type="text" name="attr_druidspecial4" width="125" STYLE="width: 125px" size="0" class="medium" value="Woodland Stride" disabled="true" /></td>
</tr>
<tr>
<td><button type="roll" value="/w @{Charactername} &{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.}}"/>
</td>
<td><input type="text" name="attr_druidspecial5" width="125" STYLE="width: 125px" size="0" class="medium" value="Totem Shape" disabled="true" /></td>
</table>
</div>
You'll want something like this:
HTML
<input type="number" name="attr_level" value="1" class="level" /> <div> <input type="hidden" name="attr_DruidClass" value="0" class="showStuff" /> <input type="hidden" name="attr_level" value="1" class="level" /> <table class="hiddenTable"> <tr> <td><button type="roll" value="/w @{Charactername} &{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.}}" /> </td> <td><input type="text" name="attr_druidspecial1" width="125" STYLE="width: 125px" size="0" class="medium" value="Bonus Languages" disabled="true" /></td> </tr> <tr> <td><button type="roll" value="/w @{Charactername} &{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.}}" /> </td> <td><input type="text" name="attr_druidspecial2" width="125" STYLE="width: 125px" size="0" class="medium" value="Nature Lore" disabled="true" /></td> </tr> <tr class="druid2ndLevel"> <td><button type="roll" value="/w @{Charactername} &{template:custom}{{title=@{druidspecial3}}}{{At 2nd level, druids gain a +2 bonus to saving throws against fire, water, earth, air, cold and lightning attacks.}}" /> </td> <td><input type="text" name="attr_druidspecial3" width="125" STYLE="width: 125px" size="0" class="medium" value="Resist Elements" disabled="true" /></td> </tr> <tr class="druid4thLevel"> <td><button type="roll" value="/w @{Charactername} &{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.}}" /> </td> <td><input type="text" name="attr_druidspecial4" width="125" STYLE="width: 125px" size="0" class="medium" value="Woodland Stride" disabled="true" /></td> </tr> <tr class="druid5thLevel"> <td><button type="roll" value="/w @{Charactername} &{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.}}" /> </td> <td><input type="text" name="attr_druidspecial5" width="125" STYLE="width: 125px" size="0" class="medium" value="Totem Shape" disabled="true" /></td> </table> </div>
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 > tbody > .druid4thLevel, input:not([value="1"]):not([value="2"]):not([value="3"]):not([value="4"]):not([value="5"]).level ~ table > tbody > .druid5thLevel { display: table-row; }
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?
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 > tbody > .sheet-druid4thLevel,
input:not([value="1"]):not([value="2"]):not([value="3"]):not([value="4"]):not([value="5"]).level ~ table > tbody > .sheet-druid5thLevel {
display: table-row;
}
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.
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.
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.
So, what's currently not working? 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. It's harder to troubleshoot that stuff when we can't see what you're seeing/working with. :)
Html
<input type="number" name="attr_level" value="1" class="level" /><div>
<input type="hidden" name="attr_DruidClass" value="0" class="showStuff" />
<input type="hidden" name="attr_level" value="1" class="level" />
<table class="hiddenTable">
<tr>
<td><button type="roll" value="/w @{Charactername} &{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.}}"
/>
</td>
<td><input type="text" name="attr_druidspecial1" width="125" STYLE="width: 125px" size="0" class="medium" value="Bonus Languages" disabled="true" /></td>
</tr>
<tr>
<td><button type="roll" value="/w @{Charactername} &{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.}}"
/>
</td>
<td><input type="text" name="attr_druidspecial2" width="125" STYLE="width: 125px" size="0" class="medium" value="Nature Lore" disabled="true" /></td>
</tr>
<tr class="druid2ndLevel">
<td><button type="roll" value="/w @{Charactername} &{template:custom}{{title=@{druidspecial3}}}{{At 2nd level, druids gain a +2 bonus to saving throws against fire, water, earth, air, cold and lightning attacks.}}" />
</td>
<td><input type="text" name="attr_druidspecial3" width="125" STYLE="width: 125px" size="0" class="medium" value="Resist Elements" disabled="true" /></td>
</tr>
<tr class="druid4thLevel">
<td><button type="roll" value="/w @{Charactername} &{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.}}"
/>
</td>
<td><input type="text" name="attr_druidspecial4" width="125" STYLE="width: 125px" size="0" class="medium" value="Woodland Stride" disabled="true" /></td>
</tr>
<tr class="druid5thLevel">
<td><button type="roll" value="/w @{Charactername} &{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.}}"
/>
</td>
<td><input type="text" name="attr_druidspecial5" width="125" STYLE="width: 125px" size="0" class="medium" value="Totem Shape" disabled="true" /></td>
</table>
</div>
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 > tbody > .sheet-druid4thLevel,
input:not([value="1"]):not([value="2"]):not([value="3"]):not([value="4"]):not([value="5"]).level ~ table > tbody > .sheet-druid5thLevel {
display: table-row;
}
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 > tbody > .sheet-druid4thLevel,
input:not([value="1"]):not([value="2"]):not([value="3"]):not([value="4"]):not([value="5"]).sheet-level ~ table > tbody > .sheet-druid5thLevel {
display: table-row;
}
See the bolded stuff...