Issues selecting the first visible element

Question

I have 3 tabs, Each tab has its own heading and content.

But I don't want to show all the 3 tabs, unless the user select to display a tab by checking the related checkbox, There are 3 related checkboxes, One for each tab.

Here is the code:

 //Function to hide all siblings but leave 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; border: 1px solid #ddd; border-bottom-color: transparent; } .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>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">Father Info</div> <div class="tab-content" id="Mother_info">Mother Info</div> <div class="tab-content" id="Guardian_info">Guardian Info</div> </div> </div> </form> 

Here is a fiddle for testing/editing: https://jsfiddle.net/s83evtrm

Everything works fine except the following scenarios:

1- When I check all the 3 checkboxes starting from father checkbox, Then uncheck guardian tha father tab becomes active, When I uncheck father mother tab should become active, But this is not happening, I printed the first visible element in this case and it returned father instead of mother.

i think this could be resolved by moving the 3rd if condition:

if(self.is(':checked') == false){
    $('#' + toRevealId).removeClass('inline-block');
    $('#' + toRevealId).removeClass('tab_active');
    $('#' + relatedSection).removeClass('block');
    $('#' + relatedSection).removeClass('active');
}

Before the 2nd one:

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');
    }
}

But in this case the 2rd condition that becomes 3rd won't work.

2- When I check any other checkbox but not the father, Then check the other one, Then check father, Then uncheck father, None of the 2 other tabs become active.

PS: to make a tab active, tab_active class is added to the tab heading ('Father', 'Mother', ..etc) and active is added to the content ('Father Info', 'Mother Info', ..etc)

How to solve this?

Answer 1

What you can try is to force a click on the first selected input if none of the tabs are active:

 // Function to hide all siblings but leave 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); // If none of the tabs are active, then activate the first one by unchecking and rechecking it. if (!$('.tab_active').length) { $('input:checked').first().click().click(); }; }); }); 

 .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; border: 1px solid #ddd; border-bottom-color: transparent; } .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>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">Father Info</div> <div class="tab-content" id="Mother_info">Mother Info</div> <div class="tab-content" id="Guardian_info">Guardian Info</div> </div> </div> </form>