Swap Visible Areas Using Select Dropdown?

Hello all CSS wizards! I would like to swap three different visible areas using a select element. <select class="sheet-block-switch" name="attr_drowpdown_option"> <option value="1" selected="selected">Option A</option> <option value="2">Option B</option> <option value="3">Option C</option> </select> <div class="sheet-block-a">A</div> <div class="sheet-block-b">B</div> <div class="sheet-block-c">C</div> The wiki has the CSS spelled out plainly for using a checkbox, as shown below, but does something similar work for a select element? .sheet-block-a, .sheet-block-switch:checked ~ .sheet-block-b { display: block; } .sheet-block-b, .sheet-block-switch:checked ~ .sheet-block-a { display: none; } Any guidance would be appreciated. Is a script needed here?

You could use sheet workers to take the value of the dropdown menu, and make the radio buttons match it.  And with the radio buttons hidden, the drop down should work. Should.

There's no need for sheet workers. Use the following; you still need the select somewhere  to make the actual switch, of course. <input type="checkbox" name="attr_dropdown_option" value="1" class="sheet-hidden sheet-hider" checked> <div class="sheet-block-a">A</div> <input type="checkbox" name="attr_dropdown_option" value="2" class="sheet-hidden sheet-hider"> <div class="sheet-block-b">B</div> <input type="checkbox" name="attr_dropdown_option" value="3" class="sheet-hidden sheet-hider"> <div class="sheet-block-c">C</div> CSS .sheet-hidden { display: none; } .sheet-hider:not(:checked) + div { display: none; }

This worked perfectly! Thanks Jakob! It's such an easy thing hiding the checkboxes and having the select elsewhere, but I probably wouldn't have come up with it myself, because I felt stuck and I only found script/jQuery solutions through google.

A followup question: Would it be possible to have two different selections show the same div? How would I accomplish that without having two divs with the same content in my code? I can't do that if the div contains radio buttons, because that messes them up.

Yes, either by using sheet workers to set the actual attribute that controls the checkbox as a result of changing the select attribute or by using more complicated CSS to precisely controlled which checkbox's checked state controls which div's display.

I've only just started learning how to use sheet workers, so as an exercise, I'll look into using that to set the attributes of the checkbox. Cheers.