user2168066
Reputation: 635
Hide parent <li> when all child <li> are hidden
I have a page that will hide list elements based on a filter input. So far I have it hiding the child elements, but what I am trying to do is also hide the parent element when all of the children for that parent are hidden. I am having a difficult time figuring out how to modify the parent style based on the children.
$('.filterinput').keyup(function() {
var a = $(this).val();
if (a.length >= 2) {
var containing = $('#list li').filter(function() {
var regex = new RegExp('\\b' + a, 'i');
return regex.test($('a', this).text());
}).slideDown();
$('#list li').not(containing).slideUp();
} else {
$('#list li').slideDown();
$("#groupList li").each(function() {
$(this).show();
})
}
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-6">
<label class="control-label">Filter Tests</label><br/>
<input class="filterinput" type="text" style="width:100%;">
</div>
<div id "panelGroups">
<ul id="groupList">
<div class="row">
<div class="col-xs-12">
<li class="allergy_panels">
<a style="color:blue; font-size: large;" id="Allergy Panels" onCLick="reply_click(this.id)">Allergy Panels</a>
<ul class="ulChild-allergy_panels" id="list">
<li class="liChild-allergy_panels"><a id="Area 10 (TX/OK)" onClick="reply_click(this.id)">Area 10 (TX/OK)</a></li>
<li class="liChild-allergy_panels"><a id="Total IgE seperate" onClick="reply_click(this.id)">Total IgE seperate</a></li>
<li class="liChild-allergy_panels"><a id="Basic Food Allergy" onClick="reply_click(this.id)">Basic Food Allergy</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="arthritis_panel">
<a style="color:blue; font-size: large;" id="Arthritis Panel" onCLick="reply_click(this.id)">Arthritis Panel</a>
<ul class="ulChild-arthritis_panel" id="list">
<li class="liChild-arthritis_panel"><a id="RF" onClick="reply_click(this.id)">RF</a></li>
<li class="liChild-arthritis_panel"><a id="CRP" onClick="reply_click(this.id)">CRP</a></li>
<li class="liChild-arthritis_panel"><a id="CBC" onClick="reply_click(this.id)">CBC</a></li>
<li class="liChild-arthritis_panel"><a id="Uric Acid" onClick="reply_click(this.id)">Uric Acid</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="diabetic_profile">
<a style="color:blue; font-size: large;" id="Diabetic Profile" onCLick="reply_click(this.id)">Diabetic Profile</a>
<ul class="ulChild-diabetic_profile" id="list">
<li class="liChild-diabetic_profile"><a id="HgbA1c (1EDTA)" onClick="reply_click(this.id)">HgbA1c (1EDTA)</a></li>
<li class="liChild-diabetic_profile"><a id="C-peptide" onClick="reply_click(this.id)">C-peptide</a></li>
<li class="liChild-diabetic_profile"><a id="Insulin" onClick="reply_click(this.id)">Insulin</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="female_hormone">
<a style="color:blue; font-size: large;" id="Female Hormone" onCLick="reply_click(this.id)">Female Hormone</a>
<ul class="ulChild-female_hormone" id="list">
<li class="liChild-female_hormone"><a id="Testosterone(Total)" onClick="reply_click(this.id)">Testosterone(Total)</a></li>
<li class="liChild-female_hormone"><a id="Intact PTH" onClick="reply_click(this.id)">Intact PTH</a></li>
<li class="liChild-female_hormone"><a id="Cortisol" onClick="reply_click(this.id)">Cortisol</a></li>
<li class="liChild-female_hormone"><a id="hCG (female)" onClick="reply_click(this.id)">hCG (female)</a></li>
<li class="liChild-female_hormone"><a id="SHBG" onClick="reply_click(this.id)">SHBG</a></li>
<li class="liChild-female_hormone"><a id="LH (female)" onClick="reply_click(this.id)">LH (female)</a></li>
<li class="liChild-female_hormone"><a id="DHEA-S" onClick="reply_click(this.id)">DHEA-S</a></li>
<li class="liChild-female_hormone"><a id="Anti-TPO" onClick="reply_click(this.id)">Anti-TPO</a></li>
<li class="liChild-female_hormone"><a id="FSH" onClick="reply_click(this.id)">FSH</a></li>
<li class="liChild-female_hormone"><a id="Progesterone" onClick="reply_click(this.id)">Progesterone</a></li>
<li class="liChild-female_hormone"><a id="Estradiol" onClick="reply_click(this.id)">Estradiol</a></li>
<li class="liChild-female_hormone"><a id="Testerone(Free)" onClick="reply_click(this.id)">Testerone(Free)</a></li>
<li class="liChild-female_hormone"><a id="CBC w/Diff (1EDTA)" onClick="reply_click(this.id)">CBC w/Diff (1EDTA)</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="heart_health">
<a style="color:blue; font-size: large;" id="Heart Health" onCLick="reply_click(this.id)">Heart Health</a>
<ul class="ulChild-heart_health" id="list">
<li class="liChild-heart_health"><a id="CRPhs" onClick="reply_click(this.id)">CRPhs</a></li>
<li class="liChild-heart_health"><a id="CK" onClick="reply_click(this.id)">CK</a></li>
<li class="liChild-heart_health"><a id="LDL(Direct)" onClick="reply_click(this.id)">LDL(Direct)</a></li>
<li class="liChild-heart_health"><a id="Cholesterol" onClick="reply_click(this.id)">Cholesterol</a></li>
<li class="liChild-heart_health"><a id="Triglycerides" onClick="reply_click(this.id)">Triglycerides</a></li>
<li class="liChild-heart_health"><a id="HDL" onClick="reply_click(this.id)">HDL</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="hepatitis">
<a style="color:blue; font-size: large;" id="Hepatitis" onCLick="reply_click(this.id)">Hepatitis</a>
<ul class="ulChild-hepatitis" id="list">
<li class="liChild-hepatitis"><a id="HCV" onClick="reply_click(this.id)">HCV</a></li>
<li class="liChild-hepatitis"><a id="Anti-hBs Quantitative" onClick="reply_click(this.id)">Anti-hBs Quantitative</a></li>
<li class="liChild-hepatitis"><a id="HAV Total" onClick="reply_click(this.id)">HAV Total</a></li>
<li class="liChild-hepatitis"><a id="HBsAg" onClick="reply_click(this.id)">HBsAg</a></li>
<li class="liChild-hepatitis"><a id="HBcAb IgM" onClick="reply_click(this.id)">HBcAb IgM</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="immunology">
<a style="color:blue; font-size: large;" id="Immunology" onCLick="reply_click(this.id)">Immunology</a>
<ul class="ulChild-immunology" id="list">
<li class="liChild-immunology"><a id="CA153" onClick="reply_click(this.id)">CA153</a></li>
<li class="liChild-immunology"><a id="CA125" onClick="reply_click(this.id)">CA125</a></li>
<li class="liChild-immunology"><a id="C3" onClick="reply_click(this.id)">C3</a></li>
<li class="liChild-immunology"><a id="C4" onClick="reply_click(this.id)">C4</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="metabolic_health">
<a style="color:blue; font-size: large;" id="Metabolic Health" onCLick="reply_click(this.id)">Metabolic Health</a>
<ul class="ulChild-metabolic_health" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="nutritional_health">
<a style="color:blue; font-size: large;" id="Nutritional Health" onCLick="reply_click(this.id)">Nutritional Health</a>
<ul class="ulChild-nutritional_health" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="pre-natal">
<a style="color:blue; font-size: large;" id="Pre-Natal" onCLick="reply_click(this.id)">Pre-Natal</a>
<ul class="ulChild-pre-natal" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="pre_surgical">
<a style="color:blue; font-size: large;" id="Pre Surgical" onCLick="reply_click(this.id)">Pre Surgical</a>
<ul class="ulChild-pre_surgical" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="post_surgical">
<a style="color:blue; font-size: large;" id="Post Surgical" onCLick="reply_click(this.id)">Post Surgical</a>
<ul class="ulChild-post_surgical" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="std_profile">
<a style="color:blue; font-size: large;" id="STD Profile" onCLick="reply_click(this.id)">STD Profile</a>
<ul class="ulChild-std_profile" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="thyroid">
<a style="color:blue; font-size: large;" id="Thyroid" onCLick="reply_click(this.id)">Thyroid</a>
<ul class="ulChild-thyroid" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="weight_loss">
<a style="color:blue; font-size: large;" id="Weight Loss" onCLick="reply_click(this.id)">Weight Loss</a>
<ul class="ulChild-weight_loss" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="send_out_test">
<a style="color:blue; font-size: large;" id="Send Out Test" onCLick="reply_click(this.id)">Send Out Test</a>
<ul class="ulChild-send_out_test" id="list">
<li class="liChild-send_out_test"><a id="AFP Maternal" onClick="reply_click(this.id)">AFP Maternal</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
</ul>
</div>Upvotes: 0
Views: 38
Answers (3)
Scaramouche
Reputation: 3257
This is still a little bit raw so it could use some refactoring for efficiency but hopefully it will light up the invisible bulb over your head. Try adding:
'slow', function(){
if($(this).parent().children('li:visible').length === 0)
$(this).parent().parent().slideUp();
else $(this).parent().parent().slideDown();
}
as the first two params in slideUp() so it runs as a callback, 'slow' is just there to BE the first param.
Note: there are some empty entries in your sample (Metabolic Health, Nutritional Health, etc) which won't be affected by this code, I left it so thinking there won't be empty entries in your real data sets.
HIH
$('.filterinput').keyup(function() {
var a = $(this).val();
if (a.length >= 2) {
var containing = $('#list li').filter(function() {
var regex = new RegExp('\\b' + a, 'i');
return regex.test($('a', this).text());
}).slideDown();
$('#list li').not(containing).slideUp('slow', function(){
if($(this).parent().children('li:visible').length === 0)
$(this).parent().parent().slideUp();
else $(this).parent().parent().slideDown();
});
} else {
$('#list li').slideDown();
$("#groupList li").each(function() {
$(this).show();
})
}
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-6">
<label class="control-label">Filter Tests</label><br/>
<input class="filterinput" type="text" style="width:100%;">
</div>
<div id "panelGroups">
<ul id="groupList">
<div class="row">
<div class="col-xs-12">
<li class="allergy_panels">
<a style="color:blue; font-size: large;" id="Allergy Panels" onCLick="reply_click(this.id)">Allergy Panels</a>
<ul class="ulChild-allergy_panels" id="list">
<li class="liChild-allergy_panels"><a id="Area 10 (TX/OK)" onClick="reply_click(this.id)">Area 10 (TX/OK)</a></li>
<li class="liChild-allergy_panels"><a id="Total IgE seperate" onClick="reply_click(this.id)">Total IgE seperate</a></li>
<li class="liChild-allergy_panels"><a id="Basic Food Allergy" onClick="reply_click(this.id)">Basic Food Allergy</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="arthritis_panel">
<a style="color:blue; font-size: large;" id="Arthritis Panel" onCLick="reply_click(this.id)">Arthritis Panel</a>
<ul class="ulChild-arthritis_panel" id="list">
<li class="liChild-arthritis_panel"><a id="RF" onClick="reply_click(this.id)">RF</a></li>
<li class="liChild-arthritis_panel"><a id="CRP" onClick="reply_click(this.id)">CRP</a></li>
<li class="liChild-arthritis_panel"><a id="CBC" onClick="reply_click(this.id)">CBC</a></li>
<li class="liChild-arthritis_panel"><a id="Uric Acid" onClick="reply_click(this.id)">Uric Acid</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="diabetic_profile">
<a style="color:blue; font-size: large;" id="Diabetic Profile" onCLick="reply_click(this.id)">Diabetic Profile</a>
<ul class="ulChild-diabetic_profile" id="list">
<li class="liChild-diabetic_profile"><a id="HgbA1c (1EDTA)" onClick="reply_click(this.id)">HgbA1c (1EDTA)</a></li>
<li class="liChild-diabetic_profile"><a id="C-peptide" onClick="reply_click(this.id)">C-peptide</a></li>
<li class="liChild-diabetic_profile"><a id="Insulin" onClick="reply_click(this.id)">Insulin</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="female_hormone">
<a style="color:blue; font-size: large;" id="Female Hormone" onCLick="reply_click(this.id)">Female Hormone</a>
<ul class="ulChild-female_hormone" id="list">
<li class="liChild-female_hormone"><a id="Testosterone(Total)" onClick="reply_click(this.id)">Testosterone(Total)</a></li>
<li class="liChild-female_hormone"><a id="Intact PTH" onClick="reply_click(this.id)">Intact PTH</a></li>
<li class="liChild-female_hormone"><a id="Cortisol" onClick="reply_click(this.id)">Cortisol</a></li>
<li class="liChild-female_hormone"><a id="hCG (female)" onClick="reply_click(this.id)">hCG (female)</a></li>
<li class="liChild-female_hormone"><a id="SHBG" onClick="reply_click(this.id)">SHBG</a></li>
<li class="liChild-female_hormone"><a id="LH (female)" onClick="reply_click(this.id)">LH (female)</a></li>
<li class="liChild-female_hormone"><a id="DHEA-S" onClick="reply_click(this.id)">DHEA-S</a></li>
<li class="liChild-female_hormone"><a id="Anti-TPO" onClick="reply_click(this.id)">Anti-TPO</a></li>
<li class="liChild-female_hormone"><a id="FSH" onClick="reply_click(this.id)">FSH</a></li>
<li class="liChild-female_hormone"><a id="Progesterone" onClick="reply_click(this.id)">Progesterone</a></li>
<li class="liChild-female_hormone"><a id="Estradiol" onClick="reply_click(this.id)">Estradiol</a></li>
<li class="liChild-female_hormone"><a id="Testerone(Free)" onClick="reply_click(this.id)">Testerone(Free)</a></li>
<li class="liChild-female_hormone"><a id="CBC w/Diff (1EDTA)" onClick="reply_click(this.id)">CBC w/Diff (1EDTA)</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="heart_health">
<a style="color:blue; font-size: large;" id="Heart Health" onCLick="reply_click(this.id)">Heart Health</a>
<ul class="ulChild-heart_health" id="list">
<li class="liChild-heart_health"><a id="CRPhs" onClick="reply_click(this.id)">CRPhs</a></li>
<li class="liChild-heart_health"><a id="CK" onClick="reply_click(this.id)">CK</a></li>
<li class="liChild-heart_health"><a id="LDL(Direct)" onClick="reply_click(this.id)">LDL(Direct)</a></li>
<li class="liChild-heart_health"><a id="Cholesterol" onClick="reply_click(this.id)">Cholesterol</a></li>
<li class="liChild-heart_health"><a id="Triglycerides" onClick="reply_click(this.id)">Triglycerides</a></li>
<li class="liChild-heart_health"><a id="HDL" onClick="reply_click(this.id)">HDL</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="hepatitis">
<a style="color:blue; font-size: large;" id="Hepatitis" onCLick="reply_click(this.id)">Hepatitis</a>
<ul class="ulChild-hepatitis" id="list">
<li class="liChild-hepatitis"><a id="HCV" onClick="reply_click(this.id)">HCV</a></li>
<li class="liChild-hepatitis"><a id="Anti-hBs Quantitative" onClick="reply_click(this.id)">Anti-hBs Quantitative</a></li>
<li class="liChild-hepatitis"><a id="HAV Total" onClick="reply_click(this.id)">HAV Total</a></li>
<li class="liChild-hepatitis"><a id="HBsAg" onClick="reply_click(this.id)">HBsAg</a></li>
<li class="liChild-hepatitis"><a id="HBcAb IgM" onClick="reply_click(this.id)">HBcAb IgM</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="immunology">
<a style="color:blue; font-size: large;" id="Immunology" onCLick="reply_click(this.id)">Immunology</a>
<ul class="ulChild-immunology" id="list">
<li class="liChild-immunology"><a id="CA153" onClick="reply_click(this.id)">CA153</a></li>
<li class="liChild-immunology"><a id="CA125" onClick="reply_click(this.id)">CA125</a></li>
<li class="liChild-immunology"><a id="C3" onClick="reply_click(this.id)">C3</a></li>
<li class="liChild-immunology"><a id="C4" onClick="reply_click(this.id)">C4</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="metabolic_health">
<a style="color:blue; font-size: large;" id="Metabolic Health" onCLick="reply_click(this.id)">Metabolic Health</a>
<ul class="ulChild-metabolic_health" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="nutritional_health">
<a style="color:blue; font-size: large;" id="Nutritional Health" onCLick="reply_click(this.id)">Nutritional Health</a>
<ul class="ulChild-nutritional_health" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="pre-natal">
<a style="color:blue; font-size: large;" id="Pre-Natal" onCLick="reply_click(this.id)">Pre-Natal</a>
<ul class="ulChild-pre-natal" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="pre_surgical">
<a style="color:blue; font-size: large;" id="Pre Surgical" onCLick="reply_click(this.id)">Pre Surgical</a>
<ul class="ulChild-pre_surgical" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="post_surgical">
<a style="color:blue; font-size: large;" id="Post Surgical" onCLick="reply_click(this.id)">Post Surgical</a>
<ul class="ulChild-post_surgical" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="std_profile">
<a style="color:blue; font-size: large;" id="STD Profile" onCLick="reply_click(this.id)">STD Profile</a>
<ul class="ulChild-std_profile" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="thyroid">
<a style="color:blue; font-size: large;" id="Thyroid" onCLick="reply_click(this.id)">Thyroid</a>
<ul class="ulChild-thyroid" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="weight_loss">
<a style="color:blue; font-size: large;" id="Weight Loss" onCLick="reply_click(this.id)">Weight Loss</a>
<ul class="ulChild-weight_loss" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="send_out_test">
<a style="color:blue; font-size: large;" id="Send Out Test" onCLick="reply_click(this.id)">Send Out Test</a>
<ul class="ulChild-send_out_test" id="list">
<li class="liChild-send_out_test"><a id="AFP Maternal" onClick="reply_click(this.id)">AFP Maternal</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
</ul>
</div>Upvotes: 0
James Andino
Reputation: 25779
Untested*
<ul id='sporks'>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<script>
$sporks = $('sporks')
$sporks_li = $sporks.find('li')
$sporks_li.each(function(li,index){
$(li).on('click',function(e){
$(this).addClass('hidden')
var hide_parrent = true
var li_array = $sporks_li.toArray()
for(var x; x< li_array.length;x++ ){
if( ! $(li_array[x]).hasClass('hidden')){
hide_parrent = false
break
}
}
if(hide_parrent){
$sporks_li.addClass('hidden')
// other things like say reopen children
}
})
})
</script>
Upvotes: 0
SomeBeginner
Reputation: 49
I think you can use a if statement to check if all children are hidden then hide the parent, maybe something like:
if (!$(child1, child2, child3).is(":visible")){
$(parent).hide();
}
Upvotes: 1
Related Questions
- How to hide everything within "ul" element if there are no "li" elements contained using jQuery?
- How to show only child of current li and hide other li child
- How to hide parent <li> if all the children are hidden in jquery
- Hide parent if all li children element have CSS style display: none
- jQuery Hide/Show only on the parent li
- How to hide parent if children are hidden?
- how to use jquery show() on li when parent ul is hidden
- jQuery show hidden li elements, but then hide visible li elements
- How do I hide a parent li-element whose child ul-li elements are all hidden using jQuery?
- jquery hide ul element within parent ul of li