hiding/showing a Div based on a Radio button (CSS Only)

Question

I'm looking for a CSS only Answer, I can solve with Javascript/Jquery but I'm attempting to solve without.

IN short, I have to Radio buttons, I would like one div to be displayed if the first one is selected and a Second div if the second one is selected.

I have Created a jsfiddle with a simplified version of myProblem https://jsfiddle.net/lukehammer/x7yw432d/5/ I can not 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 can I show a div when a radio button is pressed ?

**Bonus Points **

BounS Points if the Transition can fade in/out.

Answer 1

Layout

1. Set each radio before a div (fieldset in this demo)

2. On each radio:

   • Assign a unique #id
   • Assign an identical [name]

3. Next make 2 labels with the attribute [for] and set each attribute's value to an #id of a radio. The [for] attribute of the labels are synced to the radio with the same #id so that when the label is clicked so is the radio.

4. Place these labels anywhere you want on the page.

5. To make things easier assign a class that will group alike tags together.

---

Style

1. Hide the radios and the div that sits after each radio by setting display:none

2. Make the following ruleset (remember step 5 of Layout)

    .radio:checked + .classOfDiv { display:block }
   

   CSS rulesets are read backwards by the browser: Any element that has the className of .classOfDiv that has a sibling element that is placed before (in code it's more like above or to the left) it and that sibling (older brother?) has the className of .radio and happens to be checked as well...set that .classOfDiv display property to block.

   The + is called an Adjacent Sibling Combinator which is the key to this ruleset. See the References located after the Demo for more details.

---

Demo

.rad,
.set {
  display: none;
  opacity: 0;
}

.rad:checked+.set {
  display: block;
  opacity: 1;
}

.btn {
  display: inline-block;
  border: 2px inset grey;
  border-radius: 6px;
  padding: 2px 3px;
  cursor: pointer
}

.btn:hover {
  border-color: tomato;
  color: tomato;
  transition: .75s ease;
}

legend {
  font-size: 1.5em
}

<form id='main'>
  <fieldset>
    <legend>SWITCH</legend>
    <label for='rad0' class='btn'>OPEN SET 0</label>
    <label for='rad1' class='btn'>OPEN SET 1</label>
  </fieldset>

  <input id='rad0' class='rad' name='rad' type='radio'>

  <fieldset class='set'>
    <legend>SET 0</legend>
  </fieldset>

  <input id='rad1' class='rad' name='rad' type='radio'>

  <fieldset class='set'>
    <legend>SET 1</legend>
  </fieldset>
</form>

References

Adjacent Sibling Combinator

for Attribute