Mixing
Issues selecting the first visible element
0
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?
javascript jquery html css html5
asked Jan 1 at 17:00
maxwellmaxwell
456
add a comment |
0
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?
javascript jquery html css html5
asked Jan 1 at 17:00
maxwellmaxwell
456
add a comment |
0
0
0
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?
javascript jquery html css html5
asked Jan 1 at 17:00
maxwellmaxwell
456
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?
//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>//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>javascript jquery html css html5
javascript jquery html css html5
asked Jan 1 at 17:00
maxwellmaxwell
456
asked Jan 1 at 17:00
maxwellmaxwell
456
edited Jan 1 at 17:57
maxwell
asked Jan 1 at 17:00
maxwellmaxwell
456
asked Jan 1 at 17:00
maxwellmaxwell
456
asked Jan 1 at 17:00
maxwellmaxwell
456
456
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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>answered Jan 1 at 17:57
ArmelArmel
1,178920
That's not what i meant, All the tabs are hidden until the user checks one of the checkboxes at least, What I meant is when there are more than one checked checkboxes and the user uncheck the active one, One of the checked checkboxes should be active
– maxwell
Jan 1 at 18:01
Yes @maxwell, that's the behavior in my snippet. If you check Mother, then Guardian then Father, Father will be active, then if you uncheck Father, Mother will become active.
– Armel
Jan 1 at 18:10
So you just added the conditionif (!$('.tab_active').length) { $('input:checked').first().click().click(); };? Or there are other changes?
– maxwell
Jan 1 at 18:31
Correct, that's the only change I made :)
– Armel
Jan 1 at 18:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997307%2fissues-selecting-the-first-visible-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Jan 1 at 17:57
ArmelArmel
1,178920
That's not what i meant, All the tabs are hidden until the user checks one of the checkboxes at least, What I meant is when there are more than one checked checkboxes and the user uncheck the active one, One of the checked checkboxes should be active
– maxwell
Jan 1 at 18:01
Yes @maxwell, that's the behavior in my snippet. If you check Mother, then Guardian then Father, Father will be active, then if you uncheck Father, Mother will become active.
– Armel
Jan 1 at 18:10
So you just added the conditionif (!$('.tab_active').length) { $('input:checked').first().click().click(); };? Or there are other changes?
– maxwell
Jan 1 at 18:31
Correct, that's the only change I made :)
– Armel
Jan 1 at 18:54
add a comment |
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>answered Jan 1 at 17:57
ArmelArmel
1,178920
That's not what i meant, All the tabs are hidden until the user checks one of the checkboxes at least, What I meant is when there are more than one checked checkboxes and the user uncheck the active one, One of the checked checkboxes should be active
– maxwell
Jan 1 at 18:01
Yes @maxwell, that's the behavior in my snippet. If you check Mother, then Guardian then Father, Father will be active, then if you uncheck Father, Mother will become active.
– Armel
Jan 1 at 18:10
So you just added the conditionif (!$('.tab_active').length) { $('input:checked').first().click().click(); };? Or there are other changes?
– maxwell
Jan 1 at 18:31
Correct, that's the only change I made :)
– Armel
Jan 1 at 18:54
add a comment |
1
1
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>answered Jan 1 at 17:57
ArmelArmel
1,178920
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>// 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>// 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>answered Jan 1 at 17:57
ArmelArmel
1,178920
edited Jan 2 at 17:20
answered Jan 1 at 17:57
ArmelArmel
1,178920
answered Jan 1 at 17:57
ArmelArmel
1,178920
answered Jan 1 at 17:57
ArmelArmel
1,178920
1,178920
That's not what i meant, All the tabs are hidden until the user checks one of the checkboxes at least, What I meant is when there are more than one checked checkboxes and the user uncheck the active one, One of the checked checkboxes should be active
– maxwell
Jan 1 at 18:01
Yes @maxwell, that's the behavior in my snippet. If you check Mother, then Guardian then Father, Father will be active, then if you uncheck Father, Mother will become active.
– Armel
Jan 1 at 18:10
So you just added the conditionif (!$('.tab_active').length) { $('input:checked').first().click().click(); };? Or there are other changes?
– maxwell
Jan 1 at 18:31
Correct, that's the only change I made :)
– Armel
Jan 1 at 18:54
add a comment |
That's not what i meant, All the tabs are hidden until the user checks one of the checkboxes at least, What I meant is when there are more than one checked checkboxes and the user uncheck the active one, One of the checked checkboxes should be active
– maxwell
Jan 1 at 18:01
Yes @maxwell, that's the behavior in my snippet. If you check Mother, then Guardian then Father, Father will be active, then if you uncheck Father, Mother will become active.
– Armel
Jan 1 at 18:10
So you just added the conditionif (!$('.tab_active').length) { $('input:checked').first().click().click(); };? Or there are other changes?
– maxwell
Jan 1 at 18:31
Correct, that's the only change I made :)
– Armel
Jan 1 at 18:54
That's not what i meant, All the tabs are hidden until the user checks one of the checkboxes at least, What I meant is when there are more than one checked checkboxes and the user uncheck the active one, One of the checked checkboxes should be active
– maxwell
Jan 1 at 18:01
That's not what i meant, All the tabs are hidden until the user checks one of the checkboxes at least, What I meant is when there are more than one checked checkboxes and the user uncheck the active one, One of the checked checkboxes should be active
– maxwell
Jan 1 at 18:01
Yes @maxwell, that's the behavior in my snippet. If you check Mother, then Guardian then Father, Father will be active, then if you uncheck Father, Mother will become active.
– Armel
Jan 1 at 18:10
Yes @maxwell, that's the behavior in my snippet. If you check Mother, then Guardian then Father, Father will be active, then if you uncheck Father, Mother will become active.
– Armel
Jan 1 at 18:10
So you just added the condition
if (!$('.tab_active').length) { $('input:checked').first().click().click(); };? Or there are other changes?– maxwell
Jan 1 at 18:31
So you just added the condition
if (!$('.tab_active').length) { $('input:checked').first().click().click(); };? Or there are other changes?– maxwell
Jan 1 at 18:31
Correct, that's the only change I made :)
– Armel
Jan 1 at 18:54
Correct, that's the only change I made :)
– Armel
Jan 1 at 18:54
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997307%2fissues-selecting-the-first-visible-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
