JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<h1>
Drop Box 1.0
</h1>
<div class="rel">
<div class="drop">
<input name="term" type="radio" value="1" id="c1"> <label class="off" onclick="tog(this)" for="c1">1 Month</label>
<input name="term" type="radio" value="2" id="c2"> <label class="off" onclick="tog(this)" for="c2">2 Months</label>
<input name="term" type="radio" value="3" id="c3"> <label class="off" onclick="tog(this)" for="c3">3 Months</label>
<input name="term" type="radio" value="4" id="c4"> <label class="off" onclick="tog(this)" for="c4">4 Months</label>
<input name="term" type="radio" value="5" id="c5"> <label class="off" onclick="tog(this)" for="c5">5 Months</label>
<input name="term" type="radio" value="6" id="c6"> <label class="off" onclick="tog(this)" for="c6">6 Months</label>
<input name="term" type="radio" value="7" id="c7"> <label class="off" onclick="tog(this)" for="c7">7 Months</label>
<input name="term" type="radio" value="8" id="c8"> <label class="off" onclick="tog(this)" for="c8">8 Months</label>
<input name="term" type="radio" value="9" id="c9"> <label class="off" onclick="tog(this)" for="c9">9 Months</label>
<input name="term" type="radio" value="10" id="c10"> <label class="off" onclick="tog(this)" for="c10">10 Months</label>
<input name="term" type="radio" value="11" id="c11"> <label class="off" onclick="tog(this)" for="c11">11 Months</label>
<input name="term" type="radio" value="12" id="c12" checked="checked"> <label class="on" onclick="tog(this)" for="c12">12 Months</label>
</div></div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in varius tortor, maximus porttitor sapien. Duis at pretium est, id placerat nibh. Sed enim nibh, vehicula ut rutrum sit amet, bibendum id metus. Nunc viverra diam tincidunt lorem facilisis sagittis ac et lectus. Ut consectetur nunc ac augue rutrum, eget tempor enim sagittis. Aliquam sit amet turpis in neque condimentum malesuada vitae ut enim. Aenean luctus lacus sed erat pretium fermentum. Donec varius vehicula ligula, sit amet...

CSS

.on, .off {line-height:30px;padding:0 0 0 10px;}
.on:hover {background-color:#dedede;}
.on {display:block;}
.off {display:none;}
.rel {position:relative;height:30px;}
.drop {max-height:135px;border:1px solid #000;overflow:auto;position:absolute;width:100%;background-color:#fff;}
input {display:none;}

JavaScript

function tog(el){
var b = document.getElementsByClassName("on");
var a = document.getElementsByClassName("off");

if (b.length < 2) {

while (a.length) {
    a[0].className = "on";
  }
  
  }
  
  else {
  
while (b.length) {
    b[0].className = "off";
  }

el.className = "on";

}
  
}