JSFiddle - React, Tailwind, and code Playground

by JInks Peng

HTML

<form>
  <div>
    <div id='selection1' class='label'>
      <p>Checkboxes</p>
    </div>
    <div id='section1b' class='elements'>
      <input type='checkbox' name='box1'/> - box one<br/>
      <input type='checkbox' name='box1'/> - box one<br/>
      <input type='checkbox' name='box1'/> - box one<br/>
      <input type='checkbox' name='box1'/> - box one<br/>
      <input type='checkbox' name='box1'/> - box one<br/>
    </div> 
   </div>
   <div> 
    <div id='selection2' class='label'>
      <p>Buttons</p>
    </div>
    <div  class='elements'>
      <input type='radio' name='button1'/> - button one<br/>
      <input type='radio' name='button1'/> - button one<br/>
      <input type='radio' name='button1'/> - button one<br/>
      <input type='radio' name='button1'/> - button one<br/>
      <input type='radio' name='button1'/> - button one<br/>
    </div>   
  </div>
</form>

CSS

.label{
    width: 400px;
    margin:10px 0 0 0;
    padding: 10px;
    background-color: #ccf;
    text-align: center;
    border:1px solid #ccf;
  }
  .elements{
    border:1px solid #ccf;
    padding: 10px;
    width: 400px;
  }

JavaScript

var elements = document.getElementsByTagName('div');
  for(var i = 0; i < elements.length; ++i) {
    if(elements[i].className == 'elements') {
      elements[i].style.display = 'none';
    } else if(elements[i].className == 'label') {
      elements[i].onclick = switchDisplay;
    }
  }
  function switchDisplay () {
    var parent = this.parentNode;
    var target = parent.getElementsByTagName('div')[1];
    if(target.style.display == 'none') {
      target.style.display = 'block';
    } else {
      target.style.display = 'none';
    }
    return false;
  }