Hiding DIVs based on radio button being checked

I've looked at several posts including the CSS Wizardry post, which give examples of showing/hiding elements based on the state of a checkbox. However, what I'm trying to do is a bit different and applying those techniques, I'm not having success.

I've got two divs (call them div 1 and div 2), and three radio buttons (A, B, and C). The behavior I want is to hide 2 when A is selected, hide 1 when B is selected, and hide both 1 and 2 when C is selected.

What I'm doing so far:
HTML

<input type="radio" name="attr_chartype" class="hide2" value="A" checked>Option A</input>
<input type="radio" name="attr_chartype" class="hide1" value="B">Option B</input>
<input type="radio" name="attr_chartype" class="hideboth" value="C">Option C</input>
<div class="details1">Blah</div>
<div class="details2">Blah</div>

CSS

input.sheet-hide1:checked ~ div.sheet-details1{
	display: none;
}
input.sheet-hide2:checked ~ div.sheet-details2{
	display: none;
}

Two issues:

• The first two buttons don't do anything as implemented
• I don't know how to specify both details1 & details2 in the CSS, together/at the same time for the third button's behavior

Any assistance is appreciated.

using checked only works when using a checkbox. When using a radio button, you'll need to use value.

Also to get the behaviour you want, you'll need to make both checkboxes hidden by default, and show 1 when value="A", and show 2 when value="B"

Finally you need to use a hidden input (type="hidden") with the same name as the radio button, for roll20 to properly work on its values. This code will work:

HTML

<input type="radio" name="attr_chartype"  value="A" checked>Option A</input>
<input type="radio" name="attr_chartype"  value="B">Option B</input>
<input type="radio" name="attr_chartype"  value="C">Option C</input>
<input type="hidden" name="attr_chartype" class="showdetails" value="A"/>

<div class="details1">DIV 1</div>
<div class="details2">DIV 2</div>

Notice I changed the class name to showdetails. Since you're checking the value, you dont need two separate classes, you just need one, and it has to be on the hidden input.

The hidden input should have the same value as the checked value on the radio button. This ensures it will work properly when a sheet is first opened, before players manually change the value.

CSS

This code will work.  

div.sheet-details1,
div.sheet-details2 {
  display: none;
}
input.sheet-showdetails[value="A"] ~ div.sheet-details1, 
input.sheet-showdetails[value="B"] ~ div.sheet-details2{
  display: block;
}

But you can also use the :not operator to simplify it, and use this instead:

input.sheet-showdetails:not([value="A"]) ~ div.sheet-details2,
input.sheet-showdetails:not([value="B"]) ~ div.sheet-details1{
  display: none;
}

I appreciate your instructive and helpful reply. I tried translating it into my actual content and couldn't get your solution to work - initially assuming there was some other CSS overriding these settings, I then tried literally copying and pasting ONLY your code above into the HTML and CSS panes in my template; in your CSS solution 1, this is what displays:

Clicking the options does nothing.

When I tried your more concise :not operator solution, instead of DIV 1 it shows DIV 2 but the behavior is the same (e.g., nothing happens). Solving that is a simple matter of switching A and B values in the :not statement, but the showing/hiding still doesn't work.

The last time I did CSS was in 2006 so I am really just re-learning the modern way of doing this stuff. Thanks.

Youre right that my concide code had the div 1 and div 2 boxes switched. But that's an easy fix. The code I posted does work - I've tested it in two different sheets.

It looks like you are testing in the preview window. Don't do that - its buggy and never shows pages as they actually are.

Load the campaign fully and test it there.

If you havent tried it, test out the custom sheet sandbox - it makes editing sheets a breeze.

Great, thanks. Using the sandbox, your code works fine. I must have some CSS that is overriding the behavior of showing/hiding in my implementation.

Also remember #4 of the Common Mistakes:

4. Thinking the Preview Panel shows all the changes. The preview panel doesn't show an accurate view of how the sheet will look/work, and completely ignores sheetworkers, so you need to login to the campaign and open a character sheet there to be sure of sheet visuals/functionality, or test in a Sheet Sandbox game.

GiGs said:

Youre right that my concide code had the div 1 and div 2 boxes switched. But that's an easy fix. The code I posted does work - I've tested it in two different sheets.

It looks like you are testing in the preview window. Don't do that - its buggy and never shows pages as they actually are.

Load the campaign fully and test it there.

If you havent tried it, test out the custom sheet sandbox - it makes editing sheets a breeze.

@GiGs - do the DIVs to be hidden have to be inside the same DIV as the radio buttons?
E.g., I have

<div class="main">
    <div class="box">
        <input type="radio"...>
        <input type="radio"...>
        <input type="radio"...>
    </div>
    <div class="box">
        <div class="details1">Div1</div>
        <div class="details2">Div2</div>
    </div>
</div>

Will this not work because the radios are nested inside a different div than the details? Even though both are inside the "main" div?

Looks like I answered my own question. By moving the hidden input value into the same DIV as the two details DIVs (the ones to be hidden), I was able to make it work.

Yes, you answered your own question :)

You will likely find situations in the future where you need to make multiple copies of the hidden input, to ensure different divs work properly.