hiding a button with a checkbox

Hey folks, I have a sheet with a checkbox that can hide a section that's inside a <div></div> That works fine. What I'm hoping for is a way to hide a button with that same checkbox. The button is not in its own div, and it shares its place on the page with 3 other buttons that I do not want to hide. The idea is that the GM can reveal hidden parts of the sheet to the player when their chr hits the appropriate level. I've done this for ages with the above div trick (code below) but it seems to not work on a button. Here's the checkbox- <input type="hidden" class="toggle-show" name="attr_continuumdeets" value="0" /> Here's the div section where it does work- <div class="sheet-col sheet-continuum">             <h2 class="subsection">Continuum</h2>             ... </div> Here's the buttons- <div>     <button type="action" name="act_PersonalData" >Personal</button>     <button type="action" name="act_Social" >Social</button>     <button type="action" name="act_Combat" >Combat</button>     <button class="sheet-continuum" type="action" style="display: none;" name="act_Continuum">Continuum</button> </div> Here's the CSS- /* show the selected tab */ .charsheet .sheet-tabstoggle[value="PersonalData"] ~ div.sheet-PersonalData, .charsheet .sheet-tabstoggle[value="Social"] ~ div.sheet-Social, .charsheet .sheet-tabstoggle[value="Combat"] ~ div.sheet-Combat, .charsheet .sheet-tabstoggle[value="Continuum"] ~ div.sheet-Continuum {     display: block; } I wanna reveal that 4th button when the checkbox above is ticked. Anyone know what I'm doing wrong? Nothing I try will get the button to show up when the checkbox is ticked. Thanks

It's hard to tell you exactly the solution without seeing your full html, because for this to work, depends on knwoledge of where the checkbox is placed in the code reletive to the button it must hide. I'll try to steer you in the right direction. First, you need to remove this from the button: style="display: none;" Inline styles have a high priority and are hard to override, so get rid of that. Intead, in your CSS put this: button.sheet-continuum { display: none; } that will set its default setting hidden. Then to show it. probably uses something like .charsheet .sheet-tabstoggle[value="Continuum"] ~ div button.sheet-Continuum { display: block; } You need to trace a path from the checkbox to the button. This rule suggests an arrangement like this: checkbox <div> <button> </div> In other words, the checkbox and div containing the botton are the the same level, and the button is inside that div. Does this help?

Apologies for not providing enough info. Here's a couple of pastebins. <a href="https://pastebin.com/FfttLT9u" rel="nofollow">https://pastebin.com/FfttLT9u</a> <a href="https://pastebin.com/vZVNdmhH" rel="nofollow">https://pastebin.com/vZVNdmhH</a> The 2nd one is the CSS. I know it's a mess. I've been trying to get this working for ages, and I'm trying different things. Possibly some of them conflict.

It looks like you have two copies of that button, one still with the inline style. You might as well delete that. The simplest solution would be to add this on line 192 of the HTML, pushing that div down one line. (yes, that means you'll have multiple copies of that line-&nbsp; that's okay): &lt; input type = "hidden" class = "toggle-show" name = "attr_continuumdeets" value = "0" /&gt; Then in the CSS file, put code very similar to that suggested above: .charsheet .sheet-toggle-show[value="Continuum"] ~ div button.sheet-continuum { display: block; } See if it works now.

I'm afraid that seemed to have no effect. Here's the updated sheets, with what I think you said. updated HTML <a href="https://pastebin.com/i9tXqTnT" rel="nofollow">https://pastebin.com/i9tXqTnT</a> updated CSS <a href="https://pastebin.com/fxMxUq1j" rel="nofollow">https://pastebin.com/fxMxUq1j</a>

I'm a little confused by your code. &lt;input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="character" /&gt; &lt;input type="hidden" class="toggle-show" name="attr_continuumdeets" value="0" /&gt; &lt;div&gt; &lt;button type="action" name="act_PersonalData"&gt;Personal&lt;/button&gt; &lt;button type="action" name="act_Social"&gt;Social&lt;/button&gt; &lt;button type="action" name="act_Combat"&gt;Combat&lt;/button&gt; &lt;!--input type="hidden" class="toggle-show" name="attr_continuumdeets" value="0" /--&gt; &lt;!--button id="ContinuumButton" type="action" name="act_Continuum" &gt;Continuum&lt;/button--&gt; &lt;!--label for="checkbox" class="toggle-button"&gt;Toggle Button&lt;/label--&gt; &lt;input type="checkbox" id="checkbox" class="sheet-switch"&gt; &lt;label for="checkbox"&gt;Toggle Button&lt;/label&gt; &lt;button class="sheet-continuum" type="action" name="act_Continuum"&gt;Continuum&lt;/button&gt; &lt;/div&gt; Based on the html and css, you're trying to hide the continuum button based on the sheetTabs &nbsp;attribute, but the sheetTabs attribute only exists as this hidden attribute and is only set by clicking on the buttons contained in the div. There's no way to set the attribute to continuum &nbsp;without clicking on the button, which won't be visible unless the attribute is set to the value. All of that said, your issue is a small typo in your CSS: .charsheet .sheet-tabstoggle[value="Continuum"] ~ div button.sheet-Continuum { display: block; } The class on your button is actually sheet-continuum , all lowercase. I'd recommend updating your html, css, and javascript so that you use a consistent casing throughout the sheet, which will help to avoid issues like this.

your confusion is entirely warranted. I'm very not good at this, and I truly appreciate the idiot-check.&nbsp; I'll do as you recommend. Thanks. :)

So nothing I've done has worked. I guess it can be done, but it's beyond me. Thanks to everyone who has tried to help.

I understand your frustration, but I'm sick at the moment and can't provide the amount of help I normally would. I have three things to say. First, character sheets get corrupted, mainly when creating a new character sheet. If something doesn't work but you're sure it should work, that's a great time to assume something is corrupted. The solution is to create a new character and work on that. Have you tried this? Second, The problem you are having is a solved problem, it has a simple solution. But we can't tell what you have tried, because you don't post informative responses to people making suggestions. What you should do now is create a new character sheet in a new campaign, with only the code you are testing. Get it working there and once that is solved, transfer it to the larger character sheet. Thirdly, if you are still frustrated and want to give up, that's valid. Character sheets can be very frustrating. It's okay if you want to devote your time to something else.

Tuck S. said: I'm afraid that seemed to have no effect. Here's the updated sheets, with what I think you said. updated HTML <a href="https://pastebin.com/i9tXqTnT" rel="nofollow">https://pastebin.com/i9tXqTnT</a> updated CSS <a href="https://pastebin.com/fxMxUq1j" rel="nofollow">https://pastebin.com/fxMxUq1j</a> If you take your code from here. And just do the changes I mention here: Scott C. said: All of that said, your issue is a small typo in your CSS: .charsheet .sheet-tabstoggle[value="Continuum"] ~ div button.sheet-Continuum { display: block; } The class on your button is actually sheet-continuum , all lowercase. I'd recommend updating your html, css, and javascript so that you use a consistent casing throughout the sheet, which will help to avoid issues like this. It will work. You do need to have a way to enable the continuum without clicking the hidden button, but other than that, it will work.

Please forgive my frustration. I see wizards in here performing what appears like magic with code. I know it's simple for you, but for me it's a foreign language.&nbsp; I appreciate your patience with me. I'll try what you've suggested. Thanks again.