In need of CSS Wizard help

So what I am trying to do is link my loadout choice radio button to my DR boxes. There are 3 loadout choices and 3 DR Loadout boxes. I am trying to make them behave like tabs so that only the selected corresponding DR box is displayed.  Here is the HTML for the button <div class="sheet-box sheet-loadouts"> <div class="sheet-table"> <div class="sheet-header"> <div class="sheet-cell sheet-col0"><input type="radio" value="1" name="attr_loadoutchoice" checked="checked" class="sheet-loadoutchoice sheet-loadoutchoice1"/></div> The HTML for the DR Loadout Box <div class="sheet-loadoutchoice-content sheet-loadoutchoice1"> Bunch of content here </div> The CSS for to make it happen with my errors /* =======DR TABS =========== */ input.sheet-loadoutchoice .sheet-loadoutchoice1:not(:checked) ~ .sheet-loadoutchoice .sheet-loadoutchoice1, input.sheet-loadoutchoice .sheet-loadoutchoice2:not(:checked) ~ .sheet-loadoutchoice .sheet-loadoutchoice2, input.sheet-loadoutchoice .sheet-loadoutchoice3:not(:checked) ~ .sheet-loadoutchoice .sheet-loadoutchoice3 { display: none; } Any help would be appreciated

I would do it more like this: <a href="https://jsfiddle.net/a6z9Ljry/1/" rel="nofollow">https://jsfiddle.net/a6z9Ljry/1/</a> HTML &lt;input type="radio" value="1" name="attr_loadoutchoice" checked="checked" class="sheet-loadoutchoice"/&gt; &lt;input type="radio" value="2" name="attr_loadoutchoice" class="sheet-loadoutchoice"/&gt; &lt;input type="radio" value="3" name="attr_loadoutchoice" class="sheet-loadoutchoice"&gt; &lt;div class="sheet-loadoutchoice-content sheet-loadoutchoice1"&gt; Loadout 1 &lt;/div&gt; &lt;div class="sheet-loadoutchoice-content sheet-loadoutchoice2"&gt; Loadout 2 &lt;/div&gt; &lt;div class="sheet-loadoutchoice-content sheet-loadoutchoice3"&gt; Loadout 3 &lt;/div&gt; CSS div.sheet-loadoutchoice-content { &nbsp; display:none; } /* =======DR TABS =========== */ input.sheet-loadoutchoice[name="attr_loadoutchoice"][value="1"]:checked ~ div.sheet-loadoutchoice1, input.sheet-loadoutchoice[name="attr_loadoutchoice"][value="2"]:checked ~ div.sheet-loadoutchoice2, input.sheet-loadoutchoice[name="attr_loadoutchoice"][value="3"]:checked ~ div.sheet-loadoutchoice3 { display: block; }

Well that only caused the DR box to disappear.

Did you look at the js fiddle link?

Yep, still I have no success

Weird. Maybe I don't fully understand what you're trying to achieve. Can you share with me your whole files on pastebin or gist?

I believe your problem is with this: &lt;div class="sheet-cell sheet-col0"&gt;&lt;input type="radio" value="1" name="attr_loadoutchoice" checked="checked" class="sheet-loadoutchoice sheet-loadoutchoice1"/&gt;&lt;/div&gt; Your radio button &nbsp;is not a sibling of the divs you want to hide/show based on that. If you follow plexsoup's code, you'll note there is nothing between the radio buttons and the divs you want to have affected by those radio buttons. &nbsp;If you need to keep the radio buttons the way you have them for aesthetics, that's fine, but you'll need a trick that works in Roll20 (and not necessarily outside of R20). The trick is creating three checkboxes with the exact same names as the radio buttons and position them directly above the divs you want to show/hide, like plexsoup shows above. The checkboxes would be something like: &lt;input type="checkbox" value="1" name="attr_loadoutchoice" checked="checked" class="sheet-loadoutchoice"/&gt; &lt;input type="checkbox" value="2" name="attr_loadoutchoice" class="sheet-loadoutchoice"/&gt; &lt;input type="checkbox" value="3" name="attr_loadoutchoice" class="sheet-loadoutchoice"&gt; You'll want to be sure that whichever value in the radio buttons is checked by default, that the corresponding checkbox is also checked by default.

HTML CSS

@ Finderski I have it working just not the way i want it to.

Scott S. said: HTML CSS Both links go to the CSS code...

Ah Crap! HTML

Ok. Got the sheet: Can you tell us how you'd like them to work?

OK, so here are the Loadout selections. They each have a radio button.&nbsp; I want the hit location to change&nbsp; When the player changes loadouts.

Eventually I will be setting up the inventory to allow the defense equipment to accept inputs for DR that would be reflected in the Hit Locations.&nbsp; Just need to learn how.

I think you're almost there. Make sure the loadout radio buttons (on the wealth page) have the same name as the new radio buttons we made (on the combat page). ie: They both have to be either attr_DRloadoutchoice, or attr_loadoutchoice. They can't be different. Next, you might get some weirdness if you have two sets of radio buttons with the same name, so change your new radio buttons to checkboxes, then make them hidden. Let me know if you need more help than that. (Also, like Finderski said, sometimes it's useful to keep your hidden checkboxes at the top of the hierarchy. But if you move them now, you'll want to read up on&nbsp; CSS Selectors ; the tilde ~ may be the wrong selector for that.)

Yes that was the issue I was running into. This is the working model. I had the button names same in the first place but nothing was working. I just really need some help getting this right. I need to know what right looks like so to speak.

Try changing your files like this: HTML lines 1979-1981 &lt;input type="checkbox" value="1" name="attr_loadoutchoice" checked="checked" class="sheet-hidden sheet-loadoutchoice"/&gt; &lt;input type="checkbox" value="2" name="attr_loadoutchoice" class="sheet-hidden sheet-loadoutchoice"/&gt; &lt;input type="checkbox" value="3" name="attr_loadoutchoice" class="sheet-hidden sheet-loadoutchoice"&gt; CSS lines 155-158 input.sheet-loadoutchoice[type="checkbox"][name="attr_loadoutchoice"][value="1"]:checked ~ div.sheet-loadoutchoice1, input.sheet-loadoutchoice[type="checkbox"][name="attr_loadoutchoice"][value="2"]:checked ~ div.sheet-loadoutchoice2, input.sheet-loadoutchoice[type="checkbox"][name="attr_loadoutchoice"][value="3"]:checked ~ div.sheet-loadoutchoice3 { display: block; } Here's a test game with the character sheet <a href="https://app.roll20.net/join/2888014/RX_6oQ" rel="nofollow">https://app.roll20.net/join/2888014/RX_6oQ</a>

Amazing, that is exactly what I was trying to accomplish.

Thank you sooooo much!!!