Repeating Collapsible Sections

I'm currently modifying the Dark Heresy API Edition sheet for Only war, and would like to add a repeating section for linking traits and feats in the chat log, instead of having to cram everything into the one field or looking it up in the books. I'm using this jsfiddle, and trying to implement a 'hide' section, only on the sheet the items I've marked to be hidden don't disappear when the checkbox is checked. The exact section I'm working on is: &lt;!-- Traits Section --&gt; &lt;img src="<a href="http://i.imgur.com/TKfHnQ9.png&quot;&gt;&lt;!--" rel="nofollow">http://i.imgur.com/TKfHnQ9.png"&gt;&lt;!--</a> Divider --&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;h3 data-i18n="traits-u"&gt;Traits&lt;/h3&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="sheet-item" style="width:90%"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input name="attr_Ability" type="text"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="sheet-item" style="width:10%"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input name="attr_TraitsPage" type="text" data-i18n-placeholder="page-number-#-u" placeholder="pg#" style="text-align: center;"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;fieldset class="repeating_Abilities"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="sheet-item" style="width:90%"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input name="attr_Abilities" type="text" &gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="sheet-item" style="width:10%"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input type="checkbox" class="sheet-toggle-hide"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="sheet-item" style="width:90%"&gt;&lt;input name="attr_Description type="text" class="sheet-collapse"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;!-- Page Section &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div class="sheet-item" style="width:10%"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;input name="attr_TraitsPages" type="text"&nbsp; data-i18n-placeholder="page-number-#-u" placeholder="pg#" style="text-align: center;"&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt; --&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/fieldset&gt;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/div&gt; Here's a link to the CSS and HTML I'm working with. I think there's a conflict somewhere in the CSS but am lacking the know how to pinpoint it, any help would be much appreciated!

I believe your checkbox inputs need to be named, same as all attributes. ie name="attr_toogle_row" Try changing your css to input.sheet-toggle-hide:checked ~ div.sheet-item {display:none;} I'm not sure your checkbox can be used to hide/show div.sheet-item since it sits inside of another sibling div, but you can make a hidden copy of your checkbox and place it directly before the section you are trying to hide. &lt;div class="sheet-item" style="width: 10%"&gt;&lt;input name="attr_toggle_row" type="checkbox" class="sheet-toggle-hide"&gt;&lt;/div&gt; &lt;input name="attr_toggle_row" type="checkbox" class="sheet-toggle-hide" style="display:none; "&gt; &lt;div class="sheet-item" style="width: 90%"&gt;&lt;input name="attr_Description sheet-type=" class="sheet-collapse"&gt;&lt;/div&gt;

The problem is caused by an attack of divitus - too many divs. The checkbox needs to be on the same level as the section it is hiding or showing. You have the checkbox inside a div - it can only affect elements which are also inside that div. You dont need to use divs for single elements. Any css you apply to the div, you can also apply to the thing inside the div and get rid of the div. Use divs only to organise groups of more than one element. Also, don't use styles, add a class and move any styling off to CSS. So your HTML could be &lt;h3 data-i18n="traits-u"&gt;Traits&lt;/h3&gt; &lt;div class="abilities-grid"&gt; &lt;input name="attr_Ability" type="text"&gt; &lt;input name="attr_TraitsPage" type="text" data-i18n-placeholder="page-number-#-u" placeholder="pg#"&gt; &lt;/div&gt; &lt;fieldset class="repeating_Abilities"&gt; &lt;div class="abilities-grid"&gt; &lt;input name="attr_Abilities" type="text" &gt; &lt;input type="checkbox" class="sheet-toggle-hide"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input name="attr_Description type="text" class="sheet-collapse"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &lt;/fieldset&gt; Then in your CSS div.sheet-abilities-grid { &nbsp;&nbsp;&nbsp;&nbsp;display: grid; &nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns: 90% 10%; } input.sheet-toggle-hide:checked ~ input.sheet-collapse { display: none; } .sheet-center { &nbsp;&nbsp;&nbsp;&nbsp;text-align: center; } These two CSS lines display: grid; grid-template-columns: 90% 10%; say "organise the elements inside this group into 2 columns, of 90% and 10% width." This .sheet-center { &nbsp;&nbsp;&nbsp;&nbsp;text-align: center; } says, anything with the "center" class gets its text center-aligned, so you can just add that the any class you want. As an aside, you can add multiple classes to the same item, like you could do this: HTML: &lt;input name="attr_EXAMPLE_BOLD" type="text" class="bold"&gt; &lt;input name="attr_EXAMPLE_CENTER" type="text" class="center"&gt; &lt;input name="attr_EXAMPLE_BOTH" type="text" class="center bold"&gt; CSS: .sheet-bold { font-weight: bold; } .sheet-center { &nbsp; &nbsp; text-align: center; } This would set the first input to bold, the second with centered text, and the last with both bold and centered text. In conclusion, the grid approach puts your checkbox and Description on the same level, so the showing and hiding can work, and gives you easier CSS too. Edit: &nbsp;as Vince suggests, name the checkboxes too.

I'd add that the stuff in the sheet-item class that you want to apply to the inputs here can be added to the&nbsp; sheet-abilities-grid class, or you could add item &nbsp;as a second class to the two abilities-grid divs. But if doing the latter, you'd want to drop the width:100% &nbsp;at the very least.