Need Help With Radio Buttons

All right, now, I'm on to radio buttons. So, here's my thinking. I want a page that has a single sentence and unchecked radio button. When checked, the div coversheet becomes hidden revealing the div corecharsheet sheet. Then a tab on the character sheet (called Close) that has another radio button. When you check that one, it should hide the&nbsp; div corecharsheet &nbsp;and bring back the div coversheet . When I first started outlining the sheet, I was using checkboxes before realizing that radio buttons were a thing. The buttons are clicking and unclicking correctly but I can't get the sheets to hide and I can't figure out why. Here's the HTML &lt; div class = "charsheet" &gt; &lt; div class = "help" &gt; &lt; input type = "radio" class = "seriously" name = "attr_radio1" value = "01" hidden &gt; &lt; input type = "radio" class = "i-need-help" name = "attr_radio1" value = "02" hidden checked &gt; &lt;/ div &gt; &lt; div class = "coversheet" &gt; &lt; input type = "radio" class = "seriously" name = "attr_radio1" value = "01" hidden &gt; &lt; div class = "sheet-intro" &gt; I want a blank page here to hide the entire character sheet and a button to click that will reveal the entire character sheet and hide this page. &lt; input type = "radio" class = "seriously" name = "attr_radio1" value = "01" &gt; &lt;/ div &gt; &lt;/ div &gt; &lt; div class = "corecharsheet" &gt; &lt; input type = "radio" class = "i-need-help" name = "attr_radio1" value = "02" hidden checked &gt; &lt; div class = "wands-charactersheet" &gt; &lt; input type = "radio" name = "attr_tab" class = "sheet-tab sheet-tab1" value = "1" checked = "checked" /&gt; &lt; span class = "sheet-tab sheet-tab1" &gt; Core &lt;/ span &gt; &lt; input type = "radio" name = "attr_tab" class = "sheet-tab sheet-tab2" value = "2" /&gt; &lt; span class = "sheet-tab sheet-tab2" &gt; Bio &lt;/ span &gt; &lt; input type = "radio" name = "attr_tab" class = "sheet-tab sheet-tab3" value = "3" /&gt; &lt; span class = "sheet-tab sheet-tab3" &gt; Close &lt;/ span &gt; &lt; div class = "sheet-tab-content sheet-tab1" &gt; &lt; div class = "main-body" &gt; This will be the core page with stats. &lt;/ div &gt; &lt;/ div &gt; &lt; div class = "sheet-tab-content sheet-tab2" &gt; &lt; div class = "main-body" &gt; This will be the bio with character information and any notes they want to take. &lt;/ div &gt; &lt;/ div &gt; &lt; div class = "sheet-tab-content sheet-tab3" &gt; &lt; div class = "main-body" &gt; &lt; input type = "radio" class = "i-need-help" name = "attr_radio1" value = "02" checked &gt; &lt;/ div &gt; &lt;/ div &gt; &lt;/ div &gt; &lt;/ div &gt; &lt;/ div &gt; Here's the CSS @import url ( ' <a href="https://fonts.googleapis.com/css2?family=New+Rocker&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=New+Rocker&amp;display=swap</a> ' ); /*-----background-----*/ .charsheet { background-size : 100% ; width : 840px ; font-family : "New Rocker" , cursive; color : black ; } /*----------- Tabs Setup -------------*/ .charsheet div [ class ^= "sheet-tab-content" ] { /* tab essentials */ display : none ; padding : 10px ; /* tw */ /* end tab essentials */ background-size : 840px ; } .charsheet input.sheet-tab1:checked ~ div.sheet-tab1 , .charsheet input.sheet-tab2:checked ~ div.sheet-tab2 , .charsheet input.sheet-tab3:checked ~ div.sheet-tab3 { /* tab essentials */ display : block ; /* end tab essentials */ } .charsheet input.sheet-tab { /* tab essentials */ width : 150px ; /* tw */ height : 45px ; position : relative ; opacity : 0 ; z-index : 998 ; /* end tab essentials */ cursor : pointer ; background-image : url ( <a href="https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png" rel="nofollow">https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png</a> ); } .charsheet span.sheet-tab { /* tab essentials */ display : inline-block ; position : relative ; margin-left : -155px ; /* tw */ width : 150px ; /* tw */ /* end tab essentials */ vertical-align : middle ; height : 45px ; line-height : 45px ; cursor : pointer ; text-align : center ; /* Tabs when not clicked */ border : 2px solid black ; background-image : url ( <a href="https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png" rel="nofollow">https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png</a> ); } .charsheet input.sheet-tab1:checked + span.sheet-tab1 , .charsheet input.sheet-tab2:checked + span.sheet-tab2 , .charsheet input.sheet-tab3:checked + span.sheet-tab3 { /* Tabs when clicked */ border : 3px solid black ; font-size : 20px ; } /*----------- Tab Contents Styling -------------*/ div.sheet-intro { background-image : url ( <a href="https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png" rel="nofollow">https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png</a> ); background-repeat : no-repeat ; background-size : cover ; margin-left : auto ; margin-right : auto ; min-height : 500px ; color : black ; } div.sheet-tab1 { background-image : url ( <a href="https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png" rel="nofollow">https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png</a> ); margin-left : auto ; margin-right : auto ; min-height : 1000px ; color : black ; } div.sheet-tab2 { background-image : url ( <a href="https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png" rel="nofollow">https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png</a> ); margin-left : auto ; margin-right : auto ; min-height : 500px ; color : black ; } div.sheet-tab3 { background-image : url ( <a href="https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png" rel="nofollow">https://raw.githubusercontent.com/Scruffy518/Wands/main/vintage-background.png</a> ); margin-left : auto ; margin-right : auto ; min-height : 500px ; color : black ; } .charsheet .main-body { margin-left : auto ; margin-right : auto ; color : black ; } .charsheet input#seriously:checked ~ .sheet-intro { display : none ; } .charsheet input#i-need-help:checked ~ .wands-charactersheet { display : none ; } Am I missing something with the radio buttons or messing up the CSS? (Sorry about the radio button classes lol my friend and I just couldn't think of what to call them so we just put something stupid in it :P)

Radio buttons work best when they are in the same container. Honestly it sounds like what you want is a checkbox. Thats the best option when there are only 2 values. That said, looking at your code I see at least two issues. .charsheet input#seriously:checked ~ .sheet-intro{ This is using id syntax (the #) where it should be using class syntax like this: .charsheet input.sheet-seriously:checked ~ .sheet-intro{ It's also missing the sheet- that your other classes are using. I can't tell if you are using CSE code (that doesn't need sheet-) or not. I'd also use personally value instead of checked, especially with a radio button, like so .charsheet input.seriously[value="01"] ~ .sheet-intro{ Secondly you have your&nbsp; hidden attributes in the wrong container. They should be on the same "level" in the hierarchy as the div you are trying to hide. Instead of this: &lt;div class="charsheet"&gt; &lt;div class="help"&gt; &lt;input type="radio" class="seriously" name="attr_radio1" value="01" hidden&gt; &lt;input type="radio" class="i-need-help" name="attr_radio1" value="02" hidden checked&gt; &lt;/div&gt; &lt;div class="coversheet"&gt; it should be: &lt;div class="charsheet"&gt; &lt;input type="hidden" class="i-need-help" name="attr_radio1" value="02"&gt; &lt;div class="coversheet"&gt; You only need one hidden attribute. Whenever the radio button changes, this will take the value. And you set its starting value equal to your default radio button value, which looks like "02" That leads to setting your CSS like so: .charsheet input.sheet-i-need-help[value="02"] ~ .sheet-intro, .charsheet input.sheet-i-need-help[value="01"] ~ .wands-charactersheet { display: none; } Notice you only need one hidden input, and it is type hidden - not radio or checkbox. If you plan to have more than two sections (where a radio button might make sense, but you can still use checkboxes with different values) and only want one visible at a time, it's time to start using :not(), like so .charsheet input.sheet-i-need-help:not([value="01"]) ~ .sheet-intro, .charsheet input.sheet-i-need-help:not([value="02"]) ~ .wands-charactersheet { display: none; } I hope this helps!

Correction to the previous post - I just noticed the sections your are hiding are inside divs, so can just delete that first help section, and have something like: &lt; div class = "charsheet" &gt; &nbsp; &nbsp; &lt; div class = "coversheet" &gt; &lt; input type = "hidden" class = "sheet-i-need-help" name = "attr_radio1" value = "02" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-intro" &gt; I want a blank page here to hide the entire character sheet and a button to click that will reveal the entire character sheet and hide this page. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "radio" class = "whatever" name = "attr_radio1" value = "01" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &lt; div class = "corecharsheet" &gt; &lt; input type = "hidden" class = "sheet-i-need-help" name = "attr_radio1" value = "02" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "wands-charactersheet" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "radio" name = "attr_tab" class = "sheet-tab sheet-tab1" value = "1" checked = "checked" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; span class = "sheet-tab sheet-tab1" &gt; Core &lt;/ span &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "radio" name = "attr_tab" class = "sheet-tab sheet-tab2" value = "2" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; span class = "sheet-tab sheet-tab2" &gt; Bio &lt;/ span &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "radio" name = "attr_tab" class = "sheet-tab sheet-tab3" value = "3" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; span class = "sheet-tab sheet-tab3" &gt; Close &lt;/ span &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-tab-content sheet-tab1" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "main-body" &gt; This will be the core page with stats. &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-tab-content sheet-tab2" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "main-body" &gt; This will be the bio with character information and any notes they want to take. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-tab-content sheet-tab3" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "main-body" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "radio" class = "this isnt relevant" name = "attr_radio1" value = "02" checked &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &lt;/ div &gt; &lt;/ div &gt; I'm not sure this is right, because the way your HTML is structured looks like a weird layout. The fact your radio button is buried in one of the tabs, is confusing me. And then the relevant CSS: .charsheet input.sheet-i-need-help[value="02"] ~ .sheet-intro, .charsheet input.sheet-i-need-help[value="01"] ~ .wands-charactersheet { display: none; } You might need to swap the 01 and 02 values, but just check if something is being hidden. All that said, I'm not sure why the hidden inputs are inside a coversheet/corecharacter sheet div - why aren't you hiding those, and dispensing with the extra div inside them?

To continue from my last question, is there a reason your code doesnt look like this: &lt; div class = "charsheet" &gt; &nbsp; &nbsp; &lt; input type = "hidden" class = "i-need-help" name = "attr_radio1" value = "02" &gt; &nbsp; &nbsp; &lt; div class = "sheet-coversheet" &gt; &nbsp; &nbsp; &nbsp; &nbsp; I want a blank page here to hide the entire character sheet and a button to click that will reveal the entire character sheet and hide this page. &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "radio" class = "whatever" name = "attr_radio1" value = "01" &gt; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &lt; div class = "sheet-corecharsheet" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "radio" name = "attr_tab" class = "sheet-tab sheet-tab1" value = "1" checked = "checked" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; span class = "sheet-tab sheet-tab1" &gt; Core &lt;/ span &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "radio" name = "attr_tab" class = "sheet-tab sheet-tab2" value = "2" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; span class = "sheet-tab sheet-tab2" &gt; Bio &lt;/ span &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "radio" name = "attr_tab" class = "sheet-tab sheet-tab3" value = "3" /&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; span class = "sheet-tab sheet-tab3" &gt; Close &lt;/ span &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-tab-content sheet-tab1" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "main-body" &gt; This will be the core page with stats. &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-tab-content sheet-tab2" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "main-body" &gt; This will be the bio with character information and any notes they want to take. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "sheet-tab-content sheet-tab3" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "main-body" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input type = "radio" class = "this isnt relevant" name = "attr_radio1" value = "02" checked &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &lt;/ div &gt; &lt;/ div &gt; With CSS: .charsheet input.sheet-i-need-help[value="02"] ~ .sheet-coversheet .charsheet input.sheet-i-need-help[value="01"] ~ .sheet-corecharsheet { display: none; } (I added extra "sheet-"'s so the code would work whether you are using CSE or not - if using CSE you can delete them from HTML and CSS).

This is exactly what I was trying to get done. I did have to swap the 01 and 02 values in CSS but it worked out perfectly. It's completely not necessary but I like trying to do stupid things just cause I think it can be done somehow. Thank you so much!&nbsp;

Gald it worked out. You're welcome :)