JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div id="tab1" class="tab active">[expression]</div>
<div id="tab2" class="tab">[expression_1]</div>
<div id="tab3" class="tab">[expression_2]</div>
</div>
<form id="selectors" name="selectors">
<div class="ifchoose">Если Вы берете кредит на:</div>
<label for="6month" class="activeLabel"><input type="radio" name="select" value="tab1" class="selector" checked id="6month" hidden><span>6</span> мес.</label>
<label for="12month"><input type="radio" name="select" value="tab2" class="selector" id="12month" hidden><span>12</span> мес.</label>
<label for="24month"><input type="radio" name="select" value="tab3" class="selector" id="24month" hidden><span>24</span> мес.</label>
</form>
CSS
.container {
position:relative;
width:400px;
height:100px;
border:1px #ccc solid;
}
.tab {
width:400px;
height:100px;
position:absolute;
display:none;
}
.active {
display:block;
}
.activeLabel {
font-weight:bold;
}
.selector{
margin-left:15px;
}
#tab1{
background-color:#EEE;
}
#tab2{
background-color:#AAA;
}
#tab3{
background-color:#999;
}
JavaScript
$(function(){
$(".selector").bind('click', function(){
var showTab = $('input[name=select]:checked', '#selectors').val();
$(".tab").each(function(){
$(this).removeClass('active');
});
$("#selectors label").each(function(){
$(this).removeClass('activeLabel');
});
$("#"+showTab).addClass('active');
$(this).parent().addClass('activeLabel');
});
});