Кнопки радио Pure CSS показывают / скрывают отдельный слой DIV

Question

Я хочу, чтобы пользователь выбрал переключатель, чтобы отобразить текстовое поле с использованием чистого CSS. Я разработал радио-кнопки, но не смог заставить их работать. Я уверен, что это может быть сделано, я думаю, что я просто неправильно набираю CSS. Может кто-нибудь показать мне, что мне нужно исправить?

 <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>

и мой CSS выглядит следующим образом:

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

}


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

}

Этот последний кусочек кода CSS в основном то, что я считаю неправильным.

Answer 1

Я переключился с радиовхода на чекбокс с ползунком переключателя. CSS выглядит так:

/* 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%; } 

HTML выглядит так:

 <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>

Вы можете настроить свою собственную кнопку стиля слайдера на следующем веб-сайте: https://proto.io/freebies/onoff/