JSFiddle - React, Tailwind, and code Playground

by Rogier

HTML

<div class="a1">
   <div class="a2">
     <div class="a3">

       <div class="menu">
         <label><input type=radio name=tab id=radio-1 checked> one</label>
         <label><input type=radio name=tab id=radio-2> two</label>           <label><input type=radio name=tab id=radio-3> three</label>
       </div>

   </div>
 </div>
</div>

<div class="b1">
   <div class="b2">
     <div class="container">

        <div id="content-1" class="content">one</div>
        <div id="content-2" class="content">two</div>
        <div id="content-3" class="content">three</div>

     </div>
  </div>
</div>

CSS

.menu > label {
  display: inline-block;
  width: 6em;
  border: 1px solid gold;
}

.container > .content {
  display: none;
}

JavaScript

function contentFor(id) {
	$('#' + id.replace('radio', 'content'))
  	.show()       //  show the element
    .siblings()  //  select all other element on the same plain
    .hide();      //  hide those
}

//  handle change
$('input[name=tab]').on('change', function() {
	contentFor($(this).attr('id'));
});

//  handle initial state
$('input[name=tab]:checked').each(function() {
	contentFor($(this).attr('id'));
});