How to hide a div when another div is empty
I am new to jQuery and I am bit stuck.
Here is my HTML:
<div id="mainpage-tabs-area">
<ul class="nav cf">
<li class="tb-one"><a href="#description" class="current">BTN1</a></li>
<li class="tb-two"><a href="#tabtwo">BTN2</a></li>
<li class="tb-three"><a href="#tabthree">BTN3</a></li>
<li class="tb-four"><a href="#tabfour">BTN4</a></li>
</ul>
<div class="list-wrap">
<ul id="description">
<li>Hello, I am a description</li>
</ul>
<ul id="tabtwo" class="hide">
<li></li>
</ul>
<ul id="tabthree" class="hide">
<li></li>
</ul>
<ul id="tabfour" class="hide">
<li></li>
</ul>
</div> <!-- END List Wrap -->
</div> <!-- END Organic Tabs -->
And here is my current jQuery:
$(document).ready(function () {
var tabContent = $('ul.list-wrap').find('li').text();
if ($.trim(tabContent) === "") {
$('ul.nav li').hide();
}
});
What I want to do is just jQuery to check each li in the .list-wrap and if that li is empty then remove the corresponding li in the .nav as this is for the tab system where if the content is missing they don't want to make them appear.
Any suggestions for newbies?
Nick
source to share
I will loop through the list items, check the length of each node text, and hide the corresponding tab with
$('.list-wrap li').each(function(i){
if(!$(this).text().length) $('#mainpage-tabs-area li').eq(i).hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainpage-tabs-area">
<ul class="nav cf">
<li class="tb-one"><a href="#description" class="current">BTN1</a>
</li>
<li class="tb-two"><a href="#tabtwo">BTN2</a>
</li>
<li class="tb-three"><a href="#tabthree">BTN3</a>
</li>
<li class="tb-four"><a href="#tabfour">BTN4</a>
</li>
</ul>
<div class="list-wrap">
<ul id="description">
<li>Hello, I am a description</li>
</ul>
<ul id="tabtwo" class="hide">
<li></li>
</ul>
<ul id="tabthree" class="hide">
<li></li>
</ul>
<ul id="tabfour" class="hide">
<li></li>
</ul>
</div>
<!-- END List Wrap -->
</div>
<!-- END Organic Tabs -->
i
in a function each()
, this is the index of the element in which the loop is included and which allows you to target and hide the corresponding tab element.
source to share
I would suggest this unless you are doing infinite lists
$('.tb-two').hide(); //if tabtwo is empty
$('.tb-hree').hide(); //if tabthree is empty
and so on...
source to share