JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div class="specs">
			<ul>
				<li>
					<input type="radio" id="specs_01" name="specs" checked /><a href="#"><label for="specs_01">specs_01</label></a>					
				</li>
				<li>
          <input type="radio" id="specs_02" name="specs" /><a href="#"><label for="specs_02">specs_02</label></a>
				</li>
				<li>
					<input type="radio" id="specs_03" name="specs" /><a href="#"><label for="specs_03">specs_03</label></a>
				</li>

				<div class="specs_01 specsBox">1</div>
				<div class="specs_02 specsBox">2</div>
				<div class="specs_03 specsBox">3</div>
			</ul>
		</div>

CSS

.specsBox{display:none;}

JavaScript

$("div.specs_01").show();
$(":radio[name='specs']").change(function() {
  var specs = $(this).prop("checked",true).attr("id");
  $("div.specs  div").hide();
  if(specs == "specs_01"){
    $("div.specs_01").show();
  }else if(specs == "specs_02"){
    $("div.specs_02").show();
  }else if(specs == "specs_03"){
    $("div.specs_03").show();
  }
});