I'm having trouble creating a tab with input[type="radio"] using Jquery. The tab works fine on the first click, but it doesn't work on the second click. I can't figure out where the issue is in the Jquery code. Can someone assist me?
To view the code, follow this link: Click here
$('.tablist').on('click', 'input', function(){
var tabList = $('.tablist-content').attr('id');
if($(this).attr('type','radio').is(':checked') || $(this).next('label').text() == tabList){
$(this).parents('.tabWrapper').find("#" + tabList).show();
console.log(tabList);
}
else {
$(tabList).hide();
}
});.tablist-content {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
<ul class="list-unstyled tablist">
<li>
<input type="radio" name="tablist" id="tablist1">
<label for="tablist1">List1</label>
</li>
<li>
<input type="radio" name="tablist" id="tablist2">
<label for="tablist2">List2</label>
</li>
</ul>
<div class="col-md-12">
<div class="tablist-content" id="list1">
List one content
</div>
<div class="tablist-content" id="list2">
List Two content
</div>
</div>
</div>