JSFiddle - React, Tailwind, and code Playground
HTML
<div class="switch switch-three candy blue" id="reachout">
<input name="reachout" type="radio" id="tab-41" value="1" checked="checked"/>
<label for="tab-41">Experience</label>
<input name="reachout" type="radio" id="tab-42" value="2"/>
<label for="tab-42">Contact Us</label>
<input name="reachout" type="radio" id="tab-43" value="3"/>
<label for="tab-43">Why?</label>
<div id="test1234">
<div id="test12345">
Option Start
</div>
</div>
<span class="slide-button"></span>
</div>
<div id ="divtest" style="display:none">
test123
</div>
<input type="button" id="b1">B1
CSS
#test1234 {
border: 1px solid red;
}
JavaScript
(function ($) {
$("input[name='reachout']").on('change', function (e) {
var checkVal = $(this).val();
console.log(checkVal);
//cache elements which are used often
var $test1234 = $("#test1234"),
$test12345 = $("#test12345");
//use a switch statement instead of long winded if else
switch (checkVal) {
case "1":
$test1234.html("Option 1");
$test12345.show();
break;
case "2":
$test1234.html("Option 2");
$test12345.hide();
break;
case "3":
$test1234.html("Option 2");
$test12345.hide();
break;
}
});
})(jQuery);
$("#b1").click(function()
{
$("#divtest").display="block";
});