Help with visibility toggle inside css grid inside fieldset

In a repeating item structured inside a CSS grid I have a div whose visibility I want to be able to toggle (from a checkbox for now, but something that looks more like a button at some point).  I've played with the examples on the CSS Wizardry page and some other references I've found here on the forum, but the ones I've found all seem to be predicated on using CSS combinators to refer to sibling or child elements of the calling checkbox/button/whatever. Unfortunately the area to toggle is a sibling of the parent of the button - which CSS apparently doesn't have a direct method to address.  Is there a way to do this without having to rethink my whole layout?              < fieldset   class = "repeating_powers" >                    < div   class = "powers-grid-container" >                      < div   class = "cps" >< input   type = "number"   name = "attr_ability_cost"   title = "ability_cost"   value = "0" /></ div >                      < div   class = "power-desc" >< input   class = "power-desc"   type = "text"   name = "attr_ability_desc"   title = "ability_desc" /></ div >                      < div   class = "ips" >< input   type = "number"   name = "attr_ip_cost"   title = "ip_cost"   value = "0" /></ div >                      < div   class = "actions" >                          < input   type = "checkbox"   name = "attr_options-flag"   class = "stats-toggle" >                          < button   type = "roll"   name = "roll_power_desc"   value = "&{template:powerdesc} {{desc=@{ability_desc}}}"   class = "tochat" ></ button >                      </ div >                      < div   class = "stat-mods" >                         Contents of the toggle-able div, removed for brevity                     </ div >                  </ div >              </ fieldset > .sheet-powers-grid-container  {    display :  grid ;    grid-gap :  3px ;    grid-template-columns :  75px   505px   75px   75px ;    grid-template-columns :  auto ;    grid-template-areas :       "cps power-desc ips actions"      "... stat-mods stat-mods ..." ; } .sheet-powers-grid-container   .sheet-cps  {    grid-area : cps; } .sheet-powers-grid-container   .sheet-power-desc  {    grid-area : power-desc; } .sheet-powers-grid-container   .sheet-ips  {    grid-area : ips; } .sheet-powers-grid-container   .sheet-actions  {    grid-area : actions; } .sheet-powers-grid-container   .sheet-stat-mods  {    grid-area : stat-mods; } .sheet-stat-mods  {    border :  1px   dashed   black ;    margin-bottom :  3px ; } /* what to do here? */ input.sheet-stats-toggle:not ( :checked ) ~  div.sheet-stat-mods  {      display :  none ; }

I've simplified the layout and I'm now trying to get something to work that's sort of hybrid of one of the CSS Wizardry items and an example I found in I think the 5e Darker Dungeons sheet (though I haven't yet been able to fully pick apart what's relevant there).   < div   class = "power-desc" >      < input   class = "power-desc"   type = "text"   name = "attr_ability_desc"   title = "ability_desc" />      < input   type = "checkbox"   name = "attr-options-flag"   class = "stats-toggle"   checked = "unchecked" >< span   class = "stats-toggle pictos-button" > y </ span >      < div   class = "statmod-container" > am I visible? </ div >   </ div > input.sheet-stats-toggle:not ( :checked ) ~  div.sheet-stat-mods  {      display :  none ; } .charsheet   input.sheet-stats-toggle  {    width :  20px ;    position :  relative ;    opacity :  0 ;    z-index :  9999 ; } .charsheet   span.sheet-stats-toggle  {    /* width and margin-left must be equal the width in sheet-tab above */    width :  20px ;     margin-left :  -20px ;    text-align :  center ;      display :  inline-block ;   } input.sheet-stats-toggle:checked  ~  div.sheet-stats-toggle  {    display :  block ; }   At this point nothing appears to happen when the symbol is clicked.  I'm not sure if the checkbox toggle is even firing. Anything obvious I'm doing wrong here?

Just adjust the css to point to the div element you want to show/hide.  Your css is trying to show/hide "div.sheet-stat-mods" but it looks like it should be "div.sheet-statmod-container". Try this; input.sheet-stats-toggle:not(:checked) ~ div.sheet-statmod-container {     display: none; } input.sheet-stats-toggle {   width: 20px;   position: relative;   opacity: 0;   z-index: 9999; } span.sheet-stats-toggle {   /* width and margin-left must be equal the width in sheet-tab above */   width: 20px;    margin-left: -20px;   text-align: center;     display: inline-block;   } input.sheet-stats-toggle:checked ~ div.sheet-stats-toggle {   display: block; } Also, I suppose you have more css that defines .sheet-pictos-button so it doesn't just show the character "y" as your button?

In that last one you have the wrong class name. This: input.sheet-stats-toggle:checked ~ div.sheet-stats-toggle { should be input.sheet-stats-toggle:checked ~ div.sheet-statmod-container { For the record, the way to do the first one is to give the checkbox a value, and then create a hidden attribute with the same name at the desired level - and use that one's class to change visibility. Like so: HTML                     <div class="actions">                         <input type="checkbox" name="attr_options-flag" class="whatever-doesnt-matter-for-this" value="1">                         <button type="roll" name="roll_power_desc" value="&{template:powerdesc} {{desc=@{ability_desc}}}" class="tochat"></button>                     </div>                     <input type="hidden" name="attr_options-flag" class="stats-toggle" value="1">                     <div class="stat-mods">                         Contents of the toggle-able div, removed for brevity                     </div> CSS                 input.sheet-stats-toggle[value:"1"] ~ div.sheet-stats-mod { For the record, it's usually a good idea to give the input type in CSS, like so                 input[type="hidden"].sheet-stats-toggle[value:"1"] ~ div.sheet-stats-mod { If you're trying to override roll's inbuilt styles, it usually helps.

PS: when setting display:none,  dont set a test. Just use: div.sheet-statmod-container {     display: none; } or div.sheet-stats-mod {     display: none; } (depending on which class name for that div you settle on). The other test will override it.

Thanks for all the replies!  I've fixed the class name reference as mentioned above: input.sheet-stats-toggle:checked ~ div.sheet-statmod-container { And taken the test out of the display: none: div.sheet-statmod-container {     display: none; } ... and the show-hide toggle is working now! Only problem was it was defaulting to showing the targeted div on opening... but I noticed that at some point in my cut-and-paste assembly of this markup I'd ended up with a checkbox defined with <... checked="unchecked" /> instead of just plain old <... unchecked /> ... so with that corrected it's now working correctly.

Great! I dont think you need unchecked - the default state of a checkbox is unchecked.