Showing/Hiding in a Repeating Fields CSS Question

So all my fields in my repeating section are named this  class="sheet-row sheet-stat-row sheet-pad1" With the CSS  .charsheet .sheet-row [class *= "sheet-col"], .charsheet  [class *= "sheet-col"] {     font-size: 12px; } .charsheet .sheet-pad1{     padding-left:10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } So I add a checkbox: <div class="sheet-col-1-16" title="hide all the stuff"><input type="checkbox" name="attr_hide_the_deets" value="1" /></div> and I change the class names of the sections I want to hide when this is checked to <div class="sheet-row sheet-stat-row sheet-hidden_pad1">.  What should add to the CSS? I tried this and it did nothing .charsheet .sheet-hidden_pad1 { display:    padding-left:10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ; } .charsheet .sheet-hidden_pad1:checked ~ .sheet-hide_the_deets { display:none; }

Here is semi-minimalist code that works for me. It does include some styling in the CSS that is optional, but hopefully this helps. Change wombat in both HTML and CSS to a descriptive term for this section, like melee or skill-details or whatever you need. HTML: <fieldset class="repeating_fieldname">     <input type="checkbox" class="wombat-show arrow" name="attr_wombat_show" title="Show/Hide" value="1">     <span>Section Title</span>     <div class="wombat">         Section Content     </div> </fieldset> CSS: /* ==== SKIN CHECKBOX FOR ARROW TOGGLES (►/▼) ==== */ /* ==== HIDES THE ORIGINAL CHECKBOX ==== */ input.sheet-arrow[type="checkbox"] { opacity: 0; width: 18px; height: 18px; cursor: pointer; z-index: 1; } /* ==== STYLES AND POSITIONS WHAT COVERS THE UNCHECKED CHECKBOX ==== */ input.sheet-arrow[type="checkbox"] + span::before { margin-right: 4px; margin-left: -22px; line-height: 16px; text-align: center; display: inline-block; vertical-align: middle; content: "►"; width: 18px; height: 18px; font-size: 16px; } /* ==== WHAT CHANGES WHEN THE CHECKBOX IS CHECKED ==== */ input.sheet-arrow[type="checkbox"]:checked + span::before { content: "▼"; } /* ==== HIDES THE CONTENT UNLESS THE CHECKBOX IS CHECKED ==== */ .sheet-wombat-show:not(:checked)~.sheet-wombat { display: none; }

So is the "Hides the hontent unless the checkbox is checked" the only non-optional part there? 

I believe each CSS section is required. Elements like margins, height, font-weight, etc., that affect the appearance of elements can be changed. I think if you just want a plain regular checkbox, you could use just that CSS last section, but I have not tested it. You can start a new game and just load this code and play around with it.

When I tried it will all the CSS (and the same formatting as your check box) my checkbox completely vanished

HTML  My checkbox in the first section of repeating stuff <div class="sheet-row sheet-stat-row sheet-padl"> <div class="sheet-col-1-16"><input type="checkbox" class="hidden-stuff" name="attr_combat_show"  /></div>  </div> Then my repeating stuff I want to hide  <div class="sheet-row sheet-stat-row sheet-hidden_padl"> *other stuff inside this stuff* </div> When I tried this in my CSS it did nothing, in fact when I changed the name of the class from sheet-pad1 to sheet-hidden_pad1, It displayed completely the same, without me adding CSS forsheet-hidden_pad1,  is this normal? Does that mean my name change isn't taking any effect?   .sheet-hidden-stuff:checked ~ .sheet-hidden_padl {     display: none; }

Okay so I got it to work for me. 

Try this: HTML: <fieldset class="repeating_fieldname"> <div class="sheet-row sheet-stat-row sheet-padl"> <input type="checkbox" class="hidden-stuff" name="attr_combat_show" /> <div class="sheet-row sheet-stat-row sheet-hidden_padl">     *other stuff inside this stuff* </div> </div> </fieldset> CSS: .sheet-hidden-stuff:not(:checked)~.sheet-hidden_padl { display: none; } I think you had removed the :not qualifier in the CSS in your post above. That would hide the content when the checkbox is checked. Is that the behavior you want? Edit: Note that the checkbox input and the div that it hides are both on the same level in the HTML heirarchy. You had your checkbox in another div, which would keep this method from working. There may be a CSS way to make a checkbox in a sibling div control the visibility of a div, but I am no CSS expert by any means.

Yeah that is the behavior I want, although with your arrow I dont mind either way. So the problem I am having is it is aligning everything below it. Let me get a screen capture 

I got the checkbox hide aspect to work (I noticed I didnt have it embeded in the same div, thought I could get around that) however this is how it displays   I would like it to display like this (this is without anything in the checkbox)  Any ideas how to do that? 

Hmm... On my sheet I have the arrow as the left-most column and it works fine. There is probably a way to adjust the display, but I don't know off the top of my head. I will try to play around with it as I can, but hopefully some CSS wizard will wander by and assist you further.

For now, I just moved the arrow to the next line. It seems that all the hidden details fit into the constraints put on the checkbox. So if I add a  <div class="sheet-col-1-16"> to the checkbox then it constrains all the hidden data to that size