I have a set of 3 tabs, each with its own heading and content.
However, I only want to display the tabs that the user selects by checking the corresponding checkboxes. There are 3 checkboxes, one for each tab.
Below is the code snippet:
//Function to hide all siblings except the clicked one
function hideAllChildrenButOne(parentId, toRevealId) {
$('#' + parentId).children().css('display', 'none');
$('#' + toRevealId).css('display', 'block');
}
//Function to show the tab header and content when a checkbox is checked
function showSection(parentId, toRevealId, self) {
var relatedSection = $('#' + toRevealId).attr('data-section');
if(self.is(':checked')){
$('#' + toRevealId).addClass('inline-block');
$('#' + toRevealId).addClass('tab_active');
$('#' + toRevealId).siblings().removeClass('tab_active');
$('#' + relatedSection).siblings().removeClass('active');
$('#' + relatedSection).addClass('block');
$('#' + relatedSection).addClass('active');
}
if ($('#'+self.attr('data-header')).hasClass('tab_active')){
var count = $(".tab-header:visible").length;
if(self.is(':checked') == false && count > 0){
$(".tab-header:visible:first").addClass('tab_active');
$('#'+$(".tab-header:visible:first").attr('data-section')).addClass('active');
}
}
if(self.is(':checked') == false){
$('#' + toRevealId).removeClass('inline-block');
$('#' + toRevealId).removeClass('tab_active');
$('#' + relatedSection).removeClass('block');
$('#' + relatedSection).removeClass('active');
}
}
$(document).ready(function() {
//On clicking a tab header('Father', 'Mother', 'Brother')
$('.tab-header').click(function(event) {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
var related_section = $(this).attr('data-section');
hideAllChildrenButOne('relative_content', related_section);
});
//On changing any checkbox with name=relative[]
$("input[name='relative[]']").change(function() {
var self = $(this);
showSection('relative_tabs', self.attr('data-header'), self);
});
});.relative_container{
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
@media (min-width: 768px){
.relative_container {
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.relative_tabs{
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 7px 0;
.relative_tabs:before{
display: table;
content: " ";
}
.tab-header{
display: none;
margin-bottom: -1px;
}
.tab-header>a{
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 9px 15px;
text-decoration: none;
cursor: pointer;
}
.tab-header.tab_active>a{
color: #555;
cursor: default;
background-color: #fff;
.relative_content div{
display: none;
}
.relative_content>div.active{
display: block;
}
.tab-content{
display: none;
.hidden{
display: none;
}
.inline-block{
display: inline-block;
}
.block{
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab"></label>
<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab"></label>
<label>Guardian<input type="checkbox" name="relative[]" value="Guardian" data-header="guardian-tab"></label>
<div class="relative_container">
<div class="relative_header">
<ul class="relative_tabs" id="relative_tabs">
<li id="father-tab" data-section="Father_info" class="tab-header">
<a>Father</a>
</li>
<li data-section="Mother_info" class="tab-header" id="mother-tab">
<a>Skin Mother</a>
</li>
<li data-section="Guardian_info" class="tab-header" id="guardian-tab">
<a>Guardian</a>
</li>
</ul>
</div>
<div class="relative_content" id="relative_content">
<div class="tab-content" id="Father_info">Info about Father</div>
<div class="tab-content" id="Mother_info">Info about Mother</div>
<div class="tab-content" id="Guardian_info">Info about Guardian</div>
</div>
</div>
</form>Here is a fiddle link for testing/editing: https://jsfiddle.net/s83evtrm
Most functionalities work as expected, but there are a couple of scenarios that need fixing:
1- If all 3 checkboxes are checked in sequence (starting from "Father"), then "Father" tab is active. Upon unchecking "Guardian", the "Father" tab should switch to "Mother," but this doesn't happen. The visible element remains "Father" instead of switching to "Mother."
To address this, try moving the third condition before the second one:
if(self.is(':checked') == false){
$('#' + toRevealId).removeClass('inline-block');
$('#' + toRevealId).removeClass('tab_active');
$('#' + relatedSection).removeClass('block');
$('#' + relatedSection).removeClass('active');
}
Prioritize it over the second conditional statement:
if ($('#'+self.attr('data-header')).hasClass('tab_active')){
var count = $(".tab-header:visible").length;
if(self.is(':checked') == false && count > 0){
$(".tab-header:visible:first").addClass('tab_active');
$('#'+$(".tab-header:visible:first").attr('data-section')).addClass('active');
}
}
However, keep in mind that this might cause issues with the previous second condition turned third.
2- When selecting a different checkbox other than "Father," followed by another selection and eventual deselection of "Father," neither of the remaining tabs becomes active.
Note: To mark a tab as active, add the class tab_active to the tab heading ("Father", "Mother", etc.) and active to the content ("Info about Father", "Info about Mother", etc.).
How can these problems be resolved?