Looking for a solution using only CSS, I could use Javascript/Jquery but trying to avoid it.
In essence, I need one div to be displayed when the first radio button is selected and another div when the second radio button is selected.
I've set up a simplified version of my issue on JSFiddle here, but I can't seem to get it to work in the JS fiddle or my code.
<label>
<input id="Type1" name="UserType" type="radio" value="Contractor">
Contractor
</label>
<label>
<input id="Type2" name="UserType" type="radio" value="Managment">
Managment
</label>
<div class = "hideAtStart" id = "contractorDisplay">
Show me I'm a contractor.
</div>
<div class = "hideAtStart" id = "ManagerDisplay">
Show me I'm a managerr.
</div>
CSS
.hideAtStart {
display: none;
}
#Type1:checked ~ #contractorDisplay{
display : block;
}
#Type2:checked ~ #ManagerDisplay{
display : block;
}
Question
How do I make a div appear when a radio button is clicked?
**Extra Challenge **
Bonus points if you can make the transition fade in/out.