Pure CSS Radio Buttons show / hide a separate DIV layer

Question

I want to have the user select a radio button to show a text field using pure CSS. I styled the radio buttons but I haven't been able to get them working. I'm sure it can be done, I think I am just not typing the CSS correctly. Can someone show me what I need to fix?

 <div class="grid-quote-full">

<div id="PreviousSalesRep" class="grid-quote-full" style="display: none;"> 
 </div>
 <label class="container">No | Non <input type="radio" checked="checked" 
 name="radio" /> 
 <span class="checkmark"></span>
 </label> 
 <label class="container2">Yes | Oui <input type="radio" name="radio" /> 
 <span class="checkmark2"></span>
 </label>

 <div id="withWhomField" class="grid-quote-full-hidden">
 <label for="Who">Name of previous Sales Rep? <span class="french">| Nom du
 représentant commercial précédent?</span></label>
 <input id="Who" name="Who" type="text" class="text-field-quote" value=""
 placeholder="Name" /></div>
 </div>

and my CSS is as follows:

/* Show the Text Field */
.container2 input:checked ~ .grid-quote-full-hidden{
  width: 100%;
  display: inline-block;

}


.grid-quote-full-hidden {
 display: none;

}

This last bit of CSS code is mainly what I think I have incorrect.

Answer 1

I switched from radio input to checkbox input with a switch type slider. The CSS looks like this:

/* Hide expandable content by default */ 
.grid-quote-full-hidden { 
display: none; 
} 

/* Show hidden content when the checkbox is checked */ 
#expand:checked ~ * .grid-quote-full-hidden {
display: inline-block;
width: 100%; } 

The HTML looks like this:

 <div class="onoffswitch">
   <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="expand"> 
 <label class="onoffswitch-label" for="expand">
   <span class="onoffswitch-inner" ></span> 
   <span class="onoffswitch-switch" ></span> 
 </label> 

<table> <tbody> 
<tr class="grid-quote-full-hidden"><td> 

<div><label for="Who">Name of previous Sales Rep? <span class="french">| Nom du 
représentant commercial précédent?</span></label> <input id="Who" name="Who" 
type="text" class="text-field-quote" value="" placeholder="Name" />
</div> 

</td></tr> 
</tbody>
</table>
</div>

You can customize your own slider style button from the following website: https://proto.io/freebies/onoff/