Coding Help Needed! Show/Hide Toggle

Backstory: Making a pokemon charactersheet. I know some html, not great with css, mostly an art guy.  I made the Show/hide radio button in the navigation bar, and now I need help with getting my page to recognize when the radio is toggled 1 div is shown and the other is not and vice versa. I tried implementing the same code that worked for the button's label and change the name of what display I needed changing, and at first it worked and I coded the rest of the nav bar. But when I came back to it, it no longer works and I dont know why.  Here's a bunch of screenshots of what I'm working with.  Working button in nav: HTML (I had a simple style on the divs to see if they were properly switching, took it off so you can see better) Trainer-switch Css (works fine) CSS (doesnt work) I've scoured the Css wizardry and google trying different things but to be honest I dont know enough of what i'm doing so i end up just copy pasting and seeing if things work. Help me Master coders of Roll20 you're my only hope. 

Can you post the copyable code as text, not a screenshot?

Okay, this seems to become a classic mistake by now, you've nested the checkbox into a separate <div> which makes it not work any longer. The CSS rule  .sheet-something ~ .sheet-somethingelse mean that it's a condition for if something precedes somethingelse in the HTML, and somethingcan't be hidden inside another element like <div> . This also means if you change the order of things in the HTML but keep things the same way in the CSS, it also stops working. Read more about the general sibling combinator ( ~ ) This works: <input type="checkbox" class="something" value="1"> <div class="something">Text</div> ----- .sheet-something ~ .sheet-somethingelse{ display: none; } This does not work: <div> <input type="checkbox" class="something" value="1"> <div> <div class="something">Text</div> ----- .sheet-something ~ .sheet-somethingelse{ display: none; } Just some week ago I someone else made exactly the same mistake, and I wrote a longer reply detaining the same stuff about general sibling selector. I suggest you use indention in code consistently, there doesn't seem to be any logic currently in what you showed, which reduces readability in general. Indention in code is almost universally used to note that the indented code is inside the code of the previous code. If code is "on the same level" they should start on the same line, to make it easier to see what is or isnt inside another element. Like everything insided your <div class="trainerbutton"> should be on one single line, as the elements inside it isn't nested inside eachother.

Apologies, I feel like a Fish trying to learn to fly here. If i take out the surrounding div of the button (which the reason everyone has this problem is that the w3school told us to do it this way xD), how do I then edit the input button being used.&nbsp; for example here: /* Hide the browser's default radio button */ .sheet-trainerbutton input { &nbsp; &nbsp; position:absolute; &nbsp; &nbsp; margin-top:-16px; &nbsp; &nbsp; margin-left:673px ; &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; z-index:7; } &nbsp; &nbsp; /* Create a custom radio button */ .sheet-pokebutton2 { &nbsp; &nbsp; position:absolute; &nbsp; &nbsp; margin-left:665px; &nbsp; &nbsp; height: 30px; &nbsp; &nbsp; width: 30px; &nbsp; &nbsp; background-image: url(<a href="https://i.imgur.com/eChZ968.png" rel="nofollow">https://i.imgur.com/eChZ968.png</a>); &nbsp; &nbsp; border-radius: 50%; &nbsp; &nbsp; z-index:0; } /* When the radio button is checked, color in */ .sheet-trainerbutton input:checked ~ .sheet-pokebutton2 { &nbsp; background-image: url(<a href="https://i.imgur.com/8IkEtpe.png" rel="nofollow">https://i.imgur.com/8IkEtpe.png</a>); } &lt;div class="trainerbutton"&gt; &lt;input type="checkbox" class="sheet-trainer-switch" name="attr_trainer_switch"&gt; &lt;span class="pokebutton2"&gt;&lt;/span&gt; &lt;div class="sheet-trainer-a" value="trainer"&gt;Trainer&lt;/div&gt; &lt;div class="sheet-pokemon-b" value="pokemon"&gt;Pokemon&lt;/div&gt; &lt;/div&gt; When I Swapped all instances of "trainerbutton" with the input class "trainer-switch" and removed the div things kinda fell appart.&nbsp; Here's the full css from that button /* Trainer button Switch*/ .sheet-trainerbutton.{ position:absolute; margin-left:670px; color:#fff; } .sheet-trainer-a { text-align:center; border:solid 1px #000; border-radius:5px; background:#fff; color:#000; font: 14px bold Georgia; padding:2px; width:90px; margin-top:-20px; margin-left:695px; position:absolute; } .sheet-pokemon-b { text-align:center; border:solid 1px #000; border-radius:5px; background:#fff; color:#000; font: 14px bold Georgia; padding:2px; margin-top:-20px; width:90px; margin-left:695px; position:absolute; } .sheet-trainer-a, .sheet-trainer-switch:checked ~ .sheet-pokemon-b { display: block; } .sheet-pokemon-b, .sheet-trainer-switch:checked ~ .sheet-trainer-a { display: none; } /* Create a custom radio button */ .sheet-pokebutton2 { position:absolute; margin-top:-25px; margin-left:670px; height: 30px; width: 30px; background-image: url(<a href="https://i.imgur.com/iwddEST.png" rel="nofollow">https://i.imgur.com/iwddEST.png</a>); border-radius: 50%; z-index:0; } /* Hide the browser's default radio button */ .sheet-trainerbutton input { position:absolute; margin-top:-16px; margin-left:673px ; opacity: 0; cursor: pointer; z-index:7; } /* Create a custom radio button */ .sheet-pokebutton2 { position:absolute; margin-left:665px; height: 30px; width: 30px; background-image: url(<a href="https://i.imgur.com/eChZ968.png" rel="nofollow">https://i.imgur.com/eChZ968.png</a>); border-radius: 50%; z-index:0; } /* When the radio button is checked, color in */ .sheet-trainerbutton input:checked ~ .sheet-pokebutton2 { background-image: url(<a href="https://i.imgur.com/8IkEtpe.png" rel="nofollow">https://i.imgur.com/8IkEtpe.png</a>); } /* END trainer button Switch*/ ᐰndreas J. &nbsp;

Oh right I forgot, the easiest way to make it work, is to just add a hidden input with the same name as the "button", just before the section that needs to be toggled. This duplicate hidden input mirrors the value of the checkbox, so the checkbox can now be anywhere. The CSS would probably be needed to be something like checking for value of the thing like .sheet-trainer-switch[value="1"] , instead of the .sheet-trainer-switch :checked condition that might not work with the hidden input. Remember to define the checkbox value so Roll20 know what value the attribute should have when checked. It's most practical to use "1", as it defaults to "0" when unchecked. &lt;div class="trainerbutton"&gt; &lt;input type="checkbox" class="sheet-trainer-switch" name="attr_trainer_switch" value="1" &gt; &lt;span class="pokebutton2"&gt;&lt;/span&gt; &lt;div class="sheet-trainer-a" value="trainer"&gt;Trainer&lt;/div&gt; &lt;div class="sheet-pokemon-b" value="pokemon"&gt;Pokemon&lt;/div&gt; &lt;/div&gt; &lt;input type="hidden" class="sheet-trainer-switch" name="attr_trainer_switch"&gt; &lt;div class="trainerpage"&gt; &lt;/div&gt; &lt;div class="pokemonpage"&gt; &lt;/div&gt; This approach can also be seen in the &lt;button&gt;-based example on the CSS Wizardry page, which is just below the checkbox based example you probably looked at. <a href="https://wiki.roll20.net/CSS_Wizardry#Tabs" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Tabs</a>

Awesome! Thanks for your help. I was having a panic attack trying to figure it out and turns out it just doesnt work in the preview mode. On saving and refreshing the campagin page everything works! Thanks again dude for your help.&nbsp; ᐰndreas J. &nbsp;

An important lesson learned there - never use preview mode to judge whether code is working or not. Always load the full campaign and check it out there. If you use the Custom Sheet Sandbox feature, it is much better - you can see changes to your sheets update without having to reload the entire campaign.

Ryan H. said: Awesome! Thanks for your help. I was having a panic attack trying to figure it out and turns out it just doesnt work in the preview mode. Don't rely on the preview mode for anything but superficial things, and preferably not even that. That's Common Mistake Number 4: <a href="https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes</a> Ideally, start using <a href="https://wiki.roll20.net/Custom_Sheet_Sandbox" rel="nofollow">https://wiki.roll20.net/Custom_Sheet_Sandbox</a>