Pure CSS toggle menu

HTML

<div class="toggleswitch">
    <input id="opt_a" name="option" type="radio" value="opt_a">
    <label for="opt_a">Option A</label>
   <div class="more">Here's more</div>
  <div class="more">Here's more</div>
  <div class="more"><input></div>
        
    <input checked="checked" id="opt_b" name="option" type="radio" value="opt_b">
    <label for="opt_b">Option B</label>
           <div class="more">Here's more</div>
  <div class="more">Here's more</div>
  <div class="more"><input></div>
        
    <input id="opt_c" name="option" type="radio" value="opt_c">
    <label for="opt_c">Option C</label>    
</div>

CSS

.toggleswitch label {
  display: inline-block;
  border: 1px solid #000;
  padding: 5px 10px;
  margin: 0;
  font-weight: normal;
  float: left;
  
}

/* Don't hide the radio button in older browsers */
.toggleswitch input:checked,
.toggleswitch input:not(:checked) {
  display: none;
}

.toggleswitch input:checked + label {
  background: #f00;
}

.more{
    height: 0px;
    -webkit-transition: height 0.3s ease-in-out;
    overflow: hidden;
}
#opt_a:checked ~ .more, #opt_b:checked ~ .more{
    height: 20px;
    margin-top: 30px;

}

#opt_a:input:not(:checked)~ .more{
    display: none;
}

#opt_a,#opt_b{
    display: none;
}