Help regarding Hiding areas using a dropdown menu

I have a dropdown menu to select one value, and I want to show something different depending on what value is chosen. This is the HTML so far <div class="sheet-2colrow" style="height: 75px;"> <div class="sheet-col"> <label>Name: </label><input type="text" name="attr_character_name"/> </div> <div class="sheet-col"> <label>Race: </label> <select class="sheet-race" name="attr_race"> <option value="Human">Human</option> <option value="Android">Android</option> <option value="Demon">Demon</option></select> </div> </div> <div class="sheet-race-human"> Human </div> <div class="sheet-race-android"> Android </div> <div class="sheet-race-demon"> Demon </div> How do I show one of the three sheet-race classes depending on which option is chosen? I assume there's some sort of CSS trickery that can be done using display: none; and display: block; but I can't figure out how to do it.

The Gumshoe sheet utilizes a drop-down to switch between two variants of the sheet. Chronicles of Darkness switches things with radio boxes iirc. The CSS Wizardry have some generic tips on how to make change what is viewed. (Sorry I'm tired so have only brains to post relevant links instead of quickly whipping out a more manageable example)

Try something like html <div class="sheet-2colrow" style="height: 75px;"> <div class="sheet-col">     <label>Name: </label><input type="text" name="attr_character_name"/>  </div> <div class="sheet-col"> <label>Race:</label> <select class="sheet-race" name="attr_race">     <option value="human" selected>Human</option>     <option value="android">Android</option>     <option value="demon">Demon</option> </select> </div> </div> <input class="sheet-race" type="hidden" name="attr_race" /> <div class="sheet-race-human"> Human </div> <div class="sheet-race-android"> Android </div> <div class="sheet-race-demon"> Demon </div> css .sheet-race-human, .sheet-race-android, .sheet-race-demon { display: none; } input[value="human"].sheet-race ~ .sheet-race-human, input[value="android"].sheet-race ~ .sheet-race-android, input[value="demon"].sheet-race ~ .sheet-race-demon { display: block; } Notice the hidden input named the same as the selector?  That can be used by the css as a toggle to change the display of a section based on the value.  You can use multiple hidden inputs if needed for nested elements, otherwise you may need to adjust the css to reflect(specify) exactly where the element is located that you are trying to show/hide. note: For some reason I don't think a dropdown selector will show/hide elements while viewing in the preview tab, but I believe it will work fine when viewed on the sheet in-game. Cheers

Thanks! This is exactly what I needed.