tabs as checkboxes to independently toggle showing/hiding sections of the character sheet

I have a set of tabs on my character sheet that function as radio buttons to show only one section of the character sheet at a time.  I was thinking it would be more useful if each tab functioned as a toggle that shows/hides it's own section of the character sheet.  I'd like them to still look like tabs though. I don't know that this is possible, but I'd bet it is.  I just haven't figured out how yet.  This is as far as I've gotten.  Currently everything is shown, and clicking on the tabs doesn't do anything.  If you have an idea, I'd be interested to hear it. <div class="mnu backgroundColor section"> <button class="toggle-showAbilities buttonStyle tab leftTab" type="checkbox" name="attr_abilities" >Abilities</button> <button class="toggle-showPoints buttonStyle tab" type="checkbox" name="attr_points" >Points</button> <button class="toggle-showAttacks buttonStyle tab" type="checkbox" name="attr_attacks" >Attacks</button> <button class="toggle-showCasting buttonStyle tab" type="checkbox" name="attr_casting" >Casting</button> <button class="toggle-showSkills buttonStyle tab" type="checkbox" name="attr_skills" >Skills</button> <button class="toggle-showJournal buttonStyle tab" type="checkbox" name="attr_journal" >Journal</button> <button class="toggle-showInventory buttonStyle tab" type="checkbox" name="attr_inventory" >Inventory</button> <button class="toggle-showMagical buttonStyle tab" type="checkbox" name="attr_magical" >Magical</button> <button class="toggle-showSpellbook buttonStyle tab" type="checkbox" name="attr_spellbook" >Spellbook</button> <button class="toggle-showLeveling buttonStyle tab" type="checkbox" name="attr_leveling" >Leveling</button> </div> <div class='sheet-abilities'> <h2>abilities/abilities</h2> <derived>Sheet abilities Config/Settings goes here</derived> </div> <div class='sheet-points'> <h2>points/points</h2> <derived>Sheet points Config/Settings goes here</derived> </div> <div class='sheet-attacks'> <h2>attacks/attacks</h2> <derived>Sheet attacks Config/Settings goes here</derived> </div> <div class='sheet-casting'> <h2>casting/casting</h2> <derived>Sheet casting Config/Settings goes here</derived> </div> <div class='sheet-skills'> <h2>skills/skills</h2> <derived>Sheet skills Config/Settings goes here</derived> </div> <div class='sheet-journal'> <h2>journal/journal</h2> <derived>Sheet journal Config/Settings goes here</derived> </div> <div class='sheet-inventory'> <h2>inventory/inventory</h2> <derived>Sheet inventory Config/Settings goes here</derived> </div> <div class='sheet-magical'> <h2>magical/magical</h2> <derived>Sheet magical Config/Settings goes here</derived> </div> <div class='sheet-spellbook'> <h2>spellbook/spellbook</h2> <derived>Sheet spellbook Config/Settings goes here</derived> </div> <div class='sheet-leveling'> <h2>leveling/leveling</h2> <derived>Sheet leveling Config/Settings goes here</derived> </div> ------------------------------------------------------------------------ input.toggle-showAbilities:not(:checked) ~ div.sheet-abilities, input.toggle-showPoints:not(:checked) ~ div.sheet-points, input.toggle-showAttacks:not(:checked) ~ div.sheet-attacks, input.toggle-showCasting:not(:checked) ~ div.sheet-casting, input.toggle-showSkills:not(:checked) ~ div.sheet-skills, input.toggle-showJournal:not(:checked) ~ div.sheet-journal, input.toggle-showInventory:not(:checked) ~ div.sheet-inventory, input.toggle-showMagical:not(:checked) ~ div.sheet-magical, input.toggle-showSpellbook:not(:checked) ~ div.sheet-spellbook, input.toggle-showLeveling:not(:checked) ~ div.sheet-leveling { display: none; } /* show the selected tab */ .sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities, .sheet-tabstoggle[value="points"] ~ div.sheet-points, .sheet-tabstoggle[value="attacks"] ~ div.sheet-attacks, .sheet-tabstoggle[value="casting"] ~ div.sheet-casting, .sheet-tabstoggle[value="skills"] ~ div.sheet-skills, .sheet-tabstoggle[value="journal"] ~ div.sheet-journal, .sheet-tabstoggle[value="inventory"] ~ div.sheet-inventory, .sheet-tabstoggle[value="magical"] ~ div.sheet-magical, .sheet-tabstoggle[value="spellbook"] ~ div.sheet-spellbook, .sheet-tabstoggle[value="leveling"] ~ div.sheet-leveling { display: block; }

Checkboxes are input -elements, not button -elements. I'd suggest to move the checkboxes out of the <div class="mnu backgroundColor section"> -div, pretty sure that wouldn't work due to how the " ~ " selector works. If you change the structure of CSS, you can't expect it to behave the same way. The sibling selector only works if two html elements are siblings, and that isn't the case when the checkboxes are inside the div while the blocks-to-be-hidden are on a different level. You can check out my Star Wars D6 sheet for an poor implementation of what you're doing, that uses hidden inputs that are siblings for the same trick to work. Warning: Otherwise don't take too much inspiration from the (current) SWD6 sheet, as the implementation is bad and old, and haven't really had the time to refactor it to be at similar standards as my later sheets. Most of the quirks and structures of the sheet are inherited from the time before I worked on it. Pretty sure a more clean version of this could be created with buttons+sheetworkers based on the Tabs-example on CSS Wizardry, but would require changes to the sheetworker. The end result would be more streamlined and robust.

Hey Timothy, here is a quick implementation of tabs using radio buttons: HTML: < div   class = "sheet-tabbed-container" >      < div   class = "sheet-tabbed-header" >          < label >              < input   type = "radio"   name = "attr_selected_tab"   value = "1"   checked >              < span > Tab 1 </ span >          </ label >          < label >              < input   type = "radio"   name = "attr_selected_tab"   value = "2" >              < span > Tab 2 </ span >          </ label >          < label >              < input   type = "radio"   name = "attr_selected_tab"   value = "3" >              < span > Tab 3 </ span >          </ label >          < label >              < input   type = "radio"   name = "attr_selected_tab"   value = "4" >              < span > Tab 4 </ span >          </ label >      </ div >      < input   type = "hidden"   name = "attr_selected_tab" >      < div   class = "sheet-tabbed-content" >               < div   class = "sheet-tab" > content 1 </ div >          < div   class = "sheet-tab" > content 2 </ div >          < div   class = "sheet-tab" > content 3 </ div >          < div   class = "sheet-tab" > content 4 </ div >      </ div > </ div > CSS: .sheet-tabbed-container   .sheet-tabbed-header   label  {      position :  relative ;      display :  inline-block ;      width :  auto ;      height :  auto ;      padding :  0 ;      margin :  0 ;      height :  2em ; } .sheet-tabbed-container   .sheet-tabbed-header   label   input  {      -webkit-appearance :  none ;      -moz-appearance :  none ;      appearance :  none ;      position :  absolute ;      top :  0 ;      left :  0 ;      width :  100% ;      height :  100% ; } .sheet-tabbed-container   .sheet-tabbed-header   label   span  {      padding :  0   2em ;      line-height :  2em ;      display :  inline-block ; } .sheet-tabbed-container   .sheet-tabbed-header   label   input:checked  +  span  {      background :  blue ;      color :  white ;      font-weight :  bold ; } .sheet-tabbed-container   .sheet-tabbed-content   .sheet-tab  {      display :  none ; } .sheet-tabbed-container   input [ value = "1" ] +  .sheet-tabbed-content   .sheet-tab:nth-child ( 1 ) {      display :  block ; } .sheet-tabbed-container   input [ value = "2" ] +  .sheet-tabbed-content   .sheet-tab:nth-child ( 2 ) {      display :  block ; } .sheet-tabbed-container   input [ value = "3" ] +  .sheet-tabbed-content   .sheet-tab:nth-child ( 3 ) {      display :  block ; } .sheet-tabbed-container   input [ value = "4" ] +  .sheet-tabbed-content   .sheet-tab:nth-child ( 4 ) {      display :  block ; }

Using buttons instead of checkboxes / radios is an approach I recently championed , so I can help you out here. To restate your goals to make sure I have it right, you want a series of clickable labels "Abilities", "Points", etc. These will act as independent "toggles", with some stylistic difference to show whether it's toggled on or off. When one of these is toggled on, the corresponding section is displayed. More than one toggle can be turned on at the same time to have all of those sections displayed. Using buttons for this is going to involve some worker scripts, but I think it yields a cleaner approach than using invisible radio or checkbox inputs. Unfortunately, I can't demonstrate worker scripts in a jsfiddle, so here's all the code. I'm reducing it to just "Abilities" and "Points" for the sake of brevity, but you should get the point. <input type="hidden" class="toggle-showAbilities" name="attr_abilities" /> <input type="hidden" class="toggle-showPoints" name="attr_points" /> <div class="section"> <button class="toggle-showAbilities buttonStyle" type="action" name="act_abilities" >Abilities</button> <button class="toggle-showPoints buttonStyle" type="action" name="act_points" >Points</button> </div> <div class="abilities"> <h2>abilities/abilities</h2> <derived>Sheet abilities Config/Settings goes here</derived> </div> <div class="points"> <h2>points/points</h2> <derived>Sheet points Config/Settings goes here</derived> </div> <script type="text/worker"> const toggleAttrs = ["abilities", "points"]; toggleAttrs.forEach((attr) => { on(`clicked:${attr}`, () => { // Check the current value of the hidden flag. getAttrs([attr], function(v) { // Update the value of the hidden flag to "1" for checked or "0" for unchecked. setAttrs({ [attr]: v[attr] !== "1" ? "1" : "0" }); }); }); }); </script> .sheet-buttonStyle { /* standard styling for your buttons */ } /* ~ selects sibling elements. It only works on siblings *after* the input. */ /* * selects any element. */ /* ~ * button selects all buttons within any sibling element. */ input.sheet-toggle-showAbilities[value="1"] ~ * button.sheet-toggle-showAbilities, input.sheet-toggle-showPoints[value="1"] ~ * button.sheet-toggle-showPoints { /* Modify style to indicate this toggle is "on" */ background-color: cadetblue; } input.sheet-toggle-showAbilities:not([value="1"]) ~ .sheet-abilities, input.sheet-toggle-showPoints:not([value="1"]) ~ .sheet-points { /* Don't show this section when the corresponding toggle is not checked */ display: none; } Key points for using buttons: The button  must  have `type="action"` The name must  start with `act_` Registering the click event uses the button name following the `act_`, so to register a handler on `name="act_mybutton"` you will use `on("clicked:mybutton", () => { /* ... */ });` Similarly, the attribute name must  start with `attr_` and getting / setting the attribute uses the name following the `attr_`.

Something to note about the CSS I shared above: because all it does is take away the display, it is subtractive . Any sibling element with `abilities` is hidden whenever the toggle is not on. So consider this element: <div class="abilities points">Hi</div> This will get hidden whenever the "abilities" toggle is off or  whenever the "points" toggle is off. The only way this will not be hidden is if both  toggles are on. Because "I want to have this section displayed whenever one of these values is true" is a common goal, most of the CSS Wizardry examples use an additive  approach. They make the section start out as hidden, and then display it whenever at least one of the associated toggles is on. .sheet-abilities, .sheet-points { /* Default behavior is to not show this section */ display: none; } input.sheet-toggle-showAbilities[value="1"] ~ div.sheet-abilities, input.sheet-toggle-showPoints[value="1"] ~ div.sheet-points { /* Show this section when one of the associated toggles is on. */ display: block; } Note that this time, I specified `div` on the input selector. CSS doesn't have a simple "show or don't show" attribute - there are lots of different values for the `display` attribute, and different elements have different default values. So trying to reset the `display` backs to the default value will mean having additional rules for each type of element that you want to have this display class on: input.sheet-toggle-showAbilities[value="1"] ~ div.sheet-abilities, input.sheet-toggle-showAbilities[value="1"] ~ ul.sheet-abilities, input.sheet-toggle-showPoints[value="1"] ~ div.sheet-points, input.sheet-toggle-showPoints[value="1"] ~ ul.sheet-points { /* Show this section when one of the associated toggles is on. */ display: block; } input.sheet-toggle-showAbilities[value="1"] ~ li.sheet-abilities, input.sheet-toggle-showPoints[value="1"] ~ li.sheet-points { /* Show this section when one of the associated toggles is on. */ display: list-item; } input.sheet-toggle-showAbilities[value="1"] ~ span.sheet-abilities, input.sheet-toggle-showAbilities[value="1"] ~ img.sheet-abilities, input.sheet-toggle-showPoints[value="1"] ~ span.sheet-points, input.sheet-toggle-showPoints[value="1"] ~ img.sheet-points { /* Show this section when one of the associated toggles is on. */ display: inline; } input.sheet-toggle-showAbilities[value="1"] ~ table.sheet-abilities, input.sheet-toggle-showPoints[value="1"] ~ table.sheet-points { /* Show this section when one of the associated toggles is on. */ display: table; } Another drawback of the additive approach is that it makes it difficult to have other classes that also change the display. This is especially relevant for trying to use CSS Flex or CSS Grid. I should maybe have add a section to the wiki describing the subtractive vs additive approaches and the pros/cons of each. There's just so many sections in the CSS Wizardry page already, and I worry it seems overwhelming to people...

I prefer the subtractive approach too, so I think having a section covering that on the wiki is a good idea.

Zed, we used a similar approach to what you proposed in some sheets, however we ended up using a single attribute to hold all the UI Flags, including the ones in repeating sections. With that said, there are few drawbacks in terms of accessibility when using buttons which may or may be not an issue.

Miguel said: Zed, we used a similar approach to what you proposed in some sheets, however we ended up using a single attribute to hold all the UI Flags, including the ones in repeating sections. With that said, there are few drawbacks in terms of accessibility when using buttons which may or may be not an issue. So the attribute value is just a space-delimited list of "on" flags? That does sound preferable, I'll probably use that. What kind of accessibility drawbacks do you have with buttons? I thought having buttons would improve the accessibility, because they can gain focus correctly with keyboard navigation.

The main issue is that, taking in account the restrictions we have when authoring within Roll20, a button does not have states (on/off, checked/uncheked) so we fake this through CSS, however, screen readers have a hard time distinguishing between those states. Edit: About your first question,without going into too much details to avoid going off topic, yes it is a space delimited attribute so we can use the 'contains word' css selector. Things get more complicated when handling items within repeating sections as we need to take in account deleting reordering, etc.

Ah yes, I follow. Since the state is independent of the control, there's nothing other than CSS to hint at the current state when inspecting the control. I would like if we could use the  aria-pressed  attribute but I don't think that's currently an option with the sheet worker. The same consideration should probably be given to using `aria-hidden` although I think the CSS `display: none;` usually works for screen readers.

Thank you everyone for your suggestions.  I've modified my code using Zed's strategy.  I am seeing the buttons displayed, and they are changing color to indicate when they are selected.  Also, their state is stored.  However, all sections are shown, regardless of what state the buttons are in.  I will note that I am using CSS Grid, but currently only on the section that contains the buttons, and on the "abilities" section.  Here is my code:         <input type="hidden" class="toggle-showAbilities" name="attr_abilities"/>         <input type="hidden" class="toggle-showPoints" name="attr_points"/>         <input type="hidden" class="toggle-showAttacks" name="attr_attacks"/>         <input type="hidden" class="toggle-showCasting" name="attr_casting"/>         <input type="hidden" class="toggle-showSkills" name="attr_skills"/>         <input type="hidden" class="toggle-showJournal" name="attr_journal"/>         <input type="hidden" class="toggle-showInventory" name="attr_inventory"/>         <input type="hidden" class="toggle-showMagical" name="attr_magical"/>         <input type="hidden" class="toggle-showSpellbook" name="attr_spellbook"/>         <input type="hidden" class="toggle-showLeveling" name="attr_leveling"/>         <div class="mnu backgroundColor section">             <button class="toggle-showAbilities buttonStyle tab leftTab" type="action" name="act_abilities">Abilities</button>             <button class="toggle-showPoints buttonStyle tab" type="action" name="act_points">Points</button>             <button class="toggle-showAttacks buttonStyle tab" type="action" name="act_attacks">Attacks</button>             <button class="toggle-showCasting buttonStyle tab" type="action" name="act_casting">Casting</button>             <button class="toggle-showSkills buttonStyle tab" type="action" name="act_skills">Skills</button>             <button class="toggle-showJournal buttonStyle tab" type="action" name="act_journal">Journal</button>             <button class="toggle-showInventory buttonStyle tab" type="action" name="act_inventory">Inventory</button>             <button class="toggle-showMagical buttonStyle tab" type="action" name="act_magical">Magical</button>             <button class="toggle-showSpellbook buttonStyle tab" type="action" name="act_spellbook">Spellbook</button>             <button class="toggle-showLeveling buttonStyle tab" type="action" name="act_leveling">Leveling</button>         </div> <div class="abilities"> <div class="abilitiesGrid multiverseBackgroundColor"> </div> </div> <div class="points"> <h2>points/points</h2> <derived>Sheet points Config/Settings goes here</derived> </div> <div class="attacks"> <h2>attacks/attacks</h2> <derived>Sheet attacks Config/Settings goes here</derived> </div> <div class="casting"> <h2>casting/casting</h2> <derived>Sheet casting Config/Settings goes here</derived> </div> <div class="skills"> <h2>skills/skills</h2> <derived>Sheet skills Config/Settings goes here</derived> </div> <div class="journal"> <h2>journal/journal</h2> <derived>Sheet journal Config/Settings goes here</derived> </div> <div class="inventory"> <h2>inventory/inventory</h2> <derived>Sheet inventory Config/Settings goes here</derived> </div> <div class="magical"> <h2>magical/magical</h2> <derived>Sheet magical Config/Settings goes here</derived> </div> <div class="spellbook"> <h2>spellbook/spellbook</h2> <derived>Sheet spellbook Config/Settings goes here</derived> </div> <div class="leveling"> <h2>leveling/leveling</h2> <derived>Sheet leveling Config/Settings goes here</derived> </div> <script type="text/worker"> const toggleAttrs = ["abilities", "points", "attacks", "casting", "skills", "journal", "inventory", "magical", "spellbook", "leveling"]; toggleAttrs.forEach((attr) => { on(`clicked:${attr}`, () => { // Check the current value of the hidden flag. getAttrs([attr], function(v) { // Update the value of the hidden flag to "1" for checked or "0" for unchecked. setAttrs({ [attr]: v[attr] !== "1" ? "1" : "0" }); }); }); }); </script> ----------------------------------------------------------------- /* ~ selects sibling elements. It only works on siblings *after* the input. */ /* * selects any element. */ /* ~ * button selects all buttons within any sibling element. */ input.sheet-toggle-showAbilities[value="1"] ~ * button.sheet-toggle-showAbilities, input.sheet-toggle-showPoints[value="1"] ~ * button.sheet-toggle-showPoints, input.sheet-toggle-showAttacks[value="1"] ~ * button.sheet-toggle-showAttacks, input.sheet-toggle-showCasting[value="1"] ~ * button.sheet-toggle-showCasting, input.sheet-toggle-showSkills[value="1"] ~ * button.sheet-toggle-showSkills, input.sheet-toggle-showJournal[value="1"] ~ * button.sheet-toggle-showJournal, input.sheet-toggle-showInventory[value="1"] ~ * button.sheet-toggle-showInventory, input.sheet-toggle-showMagical[value="1"] ~ * button.sheet-toggle-showMagical, input.sheet-toggle-showSpellbook[value="1"] ~ * button.sheet-toggle-showSpellbook, input.sheet-toggle-showLeveling[value="1"] ~ * button.sheet-toggle-showLeveling { /* Modify style to indicate this toggle is "on" */ background-color: #3340FF; } input.sheet-toggle-showAbilities:not([value="1"]) ~ .sheet-showAbilities, input.sheet-toggle-showPoints:not([value="1"]) ~ .sheet-showPoints, input.sheet-toggle-showAttacks:not([value="1"]) ~ .sheet-showAttacks, input.sheet-toggle-showCasting:not([value="1"]) ~ .sheet-showCasting, input.sheet-toggle-showSkills:not([value="1"]) ~ .sheet-showSkills, input.sheet-toggle-showJournal:not([value="1"]) ~ .sheet-showJournal, input.sheet-toggle-showInventory:not([value="1"]) ~ .sheet-showInventory, input.sheet-toggle-showMagical:not([value="1"]) ~ .sheet-showMagical, input.sheet-toggle-showSpellbook:not([value="1"]) ~ .sheet-showSpellbook, input.sheet-toggle-showLeveling:not([value="1"]) ~ .sheet-showLeveling { /* Don't show this section when the corresponding toggle is not checked */ display: none; } .sheet-buttonStyle { background-image: none; background-color: #1E90FF; color: white; border: none; border-radius: 0px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; } I'm sure that this will work, and that there's something I'm overlooking.  I'm just not sure what that is yet.

Hey Tim, hard to read on my phone but it seems your rules do not match the classes in the divs. For example, ~ sheet-showLeveling when you div has a class of sheet-leveling.

Thanks for responding Miguel.  I attempted to fix the issue using your suggestion, but I wasn't able to.  The buttons still toggle and store their status.  However, all sections are shown regardless of the button states.  Here is my revised code: <input type="hidden" class="toggle-showAbilities" name="attr_showAbilities"/> <input type="hidden" class="toggle-showPoints" name="attr_showPoints"/> <input type="hidden" class="toggle-showAttacks" name="attr_showAttacks"/> <input type="hidden" class="toggle-showCasting" name="attr_showCasting"/> <input type="hidden" class="toggle-showSkills" name="attr_showSkills"/> <input type="hidden" class="toggle-showJournal" name="attr_showJournal"/> <input type="hidden" class="toggle-showInventory" name="attr_showInventory"/> <input type="hidden" class="toggle-showMagical" name="attr_showMagical"/> <input type="hidden" class="toggle-showSpellbook" name="attr_showSpellbook"/> <input type="hidden" class="toggle-showLeveling" name="attr_showLeveling"/> <div class="mnu backgroundColor section"> <button class="toggle-showAbilities buttonStyle tab leftTab" type="action" name="act_showAbilities">Abilities</button> <button class="toggle-showPoints buttonStyle tab" type="action" name="act_showPoints">Points</button> <button class="toggle-showAttacks buttonStyle tab" type="action" name="act_showAttacks">Attacks</button> <button class="toggle-showCasting buttonStyle tab" type="action" name="act_showCasting">Casting</button> <button class="toggle-showSkills buttonStyle tab" type="action" name="act_showSkills">Skills</button> <button class="toggle-showJournal buttonStyle tab" type="action" name="act_showJournal">Journal</button> <button class="toggle-showInventory buttonStyle tab" type="action" name="act_showInventory">Inventory</button> <button class="toggle-showMagical buttonStyle tab" type="action" name="act_showMagical">Magical</button> <button class="toggle-showSpellbook buttonStyle tab" type="action" name="act_showSpellbook">Spellbook</button> <button class="toggle-showLeveling buttonStyle tab" type="action" name="act_showLeveling">Leveling</button> </div> <div class="showAbilities"> <div class="abilitiesGrid multiverseBackgroundColor"> </div> </div> <div class="showPoints"> <h2>points/points</h2> <derived>Sheet points Config/Settings goes here</derived> </div> <div class="showAttacks"> <h2>attacks/attacks</h2> <derived>Sheet attacks Config/Settings goes here</derived> </div> <div class="showCasting"> <h2>casting/casting</h2> <derived>Sheet casting Config/Settings goes here</derived> </div> <div class="showSkills"> <h2>skills/skills</h2> <derived>Sheet skills Config/Settings goes here</derived> </div> <div class="showJournal"> <h2>journal/journal</h2> <derived>Sheet journal Config/Settings goes here</derived> </div> <div class="showInventory"> <h2>inventory/inventory</h2> <derived>Sheet inventory Config/Settings goes here</derived> </div> <div class="showMagical"> <h2>magical/magical</h2> <derived>Sheet magical Config/Settings goes here</derived> </div> <div class="showSpellbook"> <h2>spellbook/spellbook</h2> <derived>Sheet spellbook Config/Settings goes here</derived> </div> <div class="showLeveling"> <h2>leveling/leveling</h2> <derived>Sheet leveling Config/Settings goes here</derived> </div> <script type="text/worker"> const toggleAttrs = ["showAbilities", "showPoints", "showAttacks", "showCasting", "showSkills", "showJournal", "showInventory", "showMagical", "showSpellbook", "showLeveling"]; toggleAttrs.forEach((attr) => { on(`clicked:${attr}`, () => { // Check the current value of the hidden flag. getAttrs([attr], function(v) { // Update the value of the hidden flag to "1" for checked or "0" for unchecked. setAttrs({ [attr]: v[attr] !== "1" ? "1" : "0" }); }); }); }); </script> ----------------------------------------------------------------- /* ~ selects sibling elements. It only works on siblings *after* the input. */ /* * selects any element. */ /* ~ * button selects all buttons within any sibling element. */ input.sheet-toggle-showAbilities[value="1"] ~ * button.sheet-toggle-showAbilities, input.sheet-toggle-showPoints[value="1"] ~ * button.sheet-toggle-showPoints, input.sheet-toggle-showAttacks[value="1"] ~ * button.sheet-toggle-showAttacks, input.sheet-toggle-showCasting[value="1"] ~ * button.sheet-toggle-showCasting, input.sheet-toggle-showSkills[value="1"] ~ * button.sheet-toggle-showSkills, input.sheet-toggle-showJournal[value="1"] ~ * button.sheet-toggle-showJournal, input.sheet-toggle-showInventory[value="1"] ~ * button.sheet-toggle-showInventory, input.sheet-toggle-showMagical[value="1"] ~ * button.sheet-toggle-showMagical, input.sheet-toggle-showSpellbook[value="1"] ~ * button.sheet-toggle-showSpellbook, input.sheet-toggle-showLeveling[value="1"] ~ * button.sheet-toggle-showLeveling { /* Modify style to indicate this toggle is "on" */ background-color: #3340FF; } input.sheet-toggle-showAbilities:not([value="1"]) ~ .sheet-showAbilities, input.sheet-toggle-showPoints:not([value="1"]) ~ .sheet-showPoints, input.sheet-toggle-showAttacks:not([value="1"]) ~ .sheet-showAttacks, input.sheet-toggle-showCasting:not([value="1"]) ~ .sheet-showCasting, input.sheet-toggle-showSkills:not([value="1"]) ~ .sheet-showSkills, input.sheet-toggle-showJournal:not([value="1"]) ~ .sheet-showJournal, input.sheet-toggle-showInventory:not([value="1"]) ~ .sheet-showInventory, input.sheet-toggle-showMagical:not([value="1"]) ~ .sheet-showMagical, input.sheet-toggle-showSpellbook:not([value="1"]) ~ .sheet-showSpellbook, input.sheet-toggle-showLeveling:not([value="1"]) ~ .sheet-showLeveling { /* Don't show this section when the corresponding toggle is not checked */ display: none; } .sheet-buttonStyle { background-image: none; background-color: #1E90FF; color: white; border: none; border-radius: 0px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; }

Almost there, Tim. Now you just need to close this div tag: <div class="abilitiesGrid multiverseBackgroundColor"> to: <div class="abilitiesGrid multiverseBackgroundColor">Some content...</div>

Unfortunately, that was just a copy paste error on my post.  In my code, it already does look like this, except the "Some content..." is replaced with several hundred lines of HTML.         <div class="abilitiesGrid multiverseBackgroundColor">Some content...</div> I edited my post to correct the copy paste error.

Hey Tim, it works just fine as you may see below (click to play). I believe you may have some erroneous code inside your DIVs. Also, if your hidden inputs happens to be inside another container, the sibling rule wont work. Just host your code somewhere and paste the link here and I am sure someone will help you out ;)   

Oh, that's great!  Thank you for checking.  I think I'll try cutting everything out, getting it to work, and then adding stuff back in piece by piece, testing between each addition.

Sometimes that is the only way to (for me anyway) to figure out what is going on.  For a while I even had a "game" titled: Tabs Learning...

Excellent!  I have now found the issue, and solved it.  Here it is: "Also, if your hidden inputs happens to be inside another container, the sibling rule wont work."   - Miguel Careful observers will note that I just claimed to have found the issue, and then, in explaining it, simply pointed out what Miguel already said.  In my defense, I didn't understand what Miguel was saying until I'd pulled out everything, gotten it to work, and then added back everything, piece by piece, testing between each addition. What I learned was that if I change this: <div class='menu'> <div class="menuGrid multiverseBackgroundColor"> <input type="hidden" class="toggle-showAbilities" name="attr_showAbilities"/> <input type="hidden" class="toggle-showPoints" name="attr_showPoints"/> <input type="hidden" class="toggle-showAttacks" name="attr_showAttacks"/> <input type="hidden" class="toggle-showCasting" name="attr_showCasting"/> <input type="hidden" class="toggle-showSkills" name="attr_showSkills"/> <input type="hidden" class="toggle-showJournal" name="attr_showJournal"/> <input type="hidden" class="toggle-showInventory" name="attr_showInventory"/> <input type="hidden" class="toggle-showMagical" name="attr_showMagical"/> <input type="hidden" class="toggle-showSpellbook" name="attr_showSpellbook"/> <input type="hidden" class="toggle-showLeveling" name="attr_showLeveling"/> </div> </div> to this: <input type="hidden" class="toggle-showAbilities" name="attr_showAbilities"/> <input type="hidden" class="toggle-showPoints" name="attr_showPoints"/> <input type="hidden" class="toggle-showAttacks" name="attr_showAttacks"/> <input type="hidden" class="toggle-showCasting" name="attr_showCasting"/> <input type="hidden" class="toggle-showSkills" name="attr_showSkills"/> <input type="hidden" class="toggle-showJournal" name="attr_showJournal"/> <input type="hidden" class="toggle-showInventory" name="attr_showInventory"/> <input type="hidden" class="toggle-showMagical" name="attr_showMagical"/> <input type="hidden" class="toggle-showSpellbook" name="attr_showSpellbook"/> <input type="hidden" class="toggle-showLeveling" name="attr_showLeveling"/> <div class='menu'> <div class="menuGrid multiverseBackgroundColor"> </div> </div> the issue is resolved.  That is to say, not only can hidden inputs not be inside another container, they can't be in any container.  Also, using CSS Grid wasn't an issue. Thank you everyone for your help.  I very much appreciate it.  This Saturday is the deadline for when I will need to have the first version of the character sheet up and running.  I'm going to have to triage, but I do think I can do this.  Wish me luck = ). Also, what tool did you use to capture that video Miguel?  That was pretty sharp.

Tim Z said: Excellent!  I have now found the issue, and solved it.  Here it is: "Also, if your hidden inputs happens to be inside another container, the sibling rule wont work."   - Miguel That's great, but also a thing I adressed in the first reply for this thread: Andreas J. said: If you change the structure of CSS, you can't expect it to behave the same way. The sibling selector only works if two html elements are siblings, and that isn't the case when the checkboxes are inside the div while the blocks-to-be-hidden are on a different level You can check out my Star Wars D6 sheet for an poor implementation of what you're doing, that uses hidden inputs that are siblings for the same trick to work.

Sorry Andreas.  By the time I read your post, there were other posts which showed my checkbox strategy to have been flawed.  You provided an example, but you also criticized it, and I thought it was based on my flawed checkbox strategy. You said "if your hidden inputs happen to be inside another container, the sibling rule won't work.  I still don't understand what the sibling rule is or does.  But also, both my interpretations of this statement were misleading.  Did "inside another container" mean inside a different container, or inside an additional container.  The first implies the hidden inputs should be in the same container as the buttons.  The second implies they should only be in one container.  In my experience, if they are in any container, it breaks the code. I do appreciate your posts, and think you know what you're doing.  This time though, I wasn't able to take advantage of your help.  It's no one's fault though.  Learning is hard, especially at a distance.

I also linked to the documentation of the " ~ " selector , but called it sibling selector in the second sentence, so I understand that you overlooked my post.

Tim, hidden inputs can be inside containers, it just depends on where the containers they are impacting are.  They need to be at the same "level" as the stuff they are controlling. Maybe this will help: <div class="level0">     <input type='hidden" name='level1' value='1'>     <div class="level1">             <input name='level2' type='hidden' value='1'>             <div class="level2">                 <input type='hidden' name='level3' value='1'>                 <!-- stuff here this is level3, btw-->             </div>             <div class="level2">                 <!-- stuff here-->             </div>     </div>     <div class="level1">             <div class="level2">                 <!-- stuff here-->             </div>             <div class="level2">                 <!-- stuff here-->             </div>     </div>     <div class="level1">             <div class="level2">                 <!-- stuff here-->             </div>             <div class="level2">                 <!-- stuff here-->             </div>     </div> </div> So, in this, all the level1 divs are siblings, all the level2 things are siblings within their level1 div container. The level1 hidden input can affect ALL the other level1 divs The level2 hidden input can affect all the level2 divs within that single level1 container (but couldn't impact any of the level2 divs within a different level1 container, because they aren't siblings). The level3 hidden input could impact things at level3 within that single level2 div container. Does that help?

Thanks Andreas.  I'm still wrapping my head around the "~" selector.  I have two partially conflicting goals, cutting down the tree (making my deadline), and sharpening my axe (learning this stuff so I can get it done faster).  This means I have, for a while now, had a backlog of concepts in replies to my posts, to take advantage of.  I continue to make progress on this backlog, but even when I catch up, it's only a matter of time before there's a backlog again.  Don't get me wrong though.  This is not a complaint.  I'm thrilled to have help.  Some learning curves have, in the past, without help, proven too steep for my time and or patience. Thanks Finderski.  Yes that does help.  I believe I understood everything you said.  Before reading that I hadn't understood . . . well, any of that. = )