JSFiddle - React, Tailwind, and code Playground

by JInks Peng

HTML

<form>
   <div role='tablist' aria-multise='true'>
     <fieldset>
       <legend class='label' role='tab' aria-expanded='true' id='lable_1'>
         <a href="">Checkboxes</a>
       </legend>
       <div class='elements' id='panel_1' >
         <input type="checkbox"  id='box1' value='one'/>
         <label for='box1'>One</label>
         <input type="checkbox"  id='box2' value='two'/>
         <label for='box2'>Two</label>
         <input type="checkbox"  id='box3' value='three'/>
         <label for='box3'>Three</label>
       </div>
     </fieldset>
     <fieldset>
       <legend class='label' aria-expanded='true' id='lable_2'>
         <a href="">Buttons</a>
       </legend>
       <div class='elements' id='panel_2'>
         <input type="radio"  id='b1' value='b one'/>
         <label for='b1'>One</label>
         <input type="radio"  id='b2' value='b two'/>
         <label for='b2'>Two</label>
         <input type="radio"  id='b3' value='b three'/>
         <label for='b3'>Three</label>
       </div>
     </fieldset>
   </div>
 </form>

CSS

legend{
  background-color: pink;
  padding: 5px;
 }

JavaScript

var elements = document.querySelectorAll('.elements');
 for(var i = 0; i < elements.length; ++i) {
  elements[i].style.display = 'none';
  elements[i].setAttribute('aria-hidden','true');
 }
 var labels = document.querySelectorAll('.label');
 for(var j = 0; j < labels.length; ++j) {
  labels[j].onclick = switchDisplay;
  labels[j].style.display='block';
  labels[j].setAttribute('aria-expanded','false');
 }
 function switchDisplay() {
  var parent = this.parentNode;
  var targetId = 'panel_' + this.id.split('_')[1];
  var target = document.getElementById(targetId);
  if(this.getAttribute('aria-expanded') == 'true') {
    this.setAttribute('aria-expanded','false');
    target.style.display = 'none';
    target.setAttribute('aria-hidden','true');
  } else {
    this.setAttribute('aria-expanded','true');
    target.style.display = 'block';
    target.setAttribute('aria-hidden','false');
  }
  return false;
 }