How to hide a div when another div is empty

Question

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

+3

javascript jquery html css

Nick else Jul 24 15 at 15:43

source to share

3 answers

This should do the job:

$('.list-wrap ul li').each(function(){
    var cnt = $('.list-wrap ul li').index( $(this) );
    var txt = $(this).text();
    if ($.trim(txt)==''){
        $('.nav li').eq(cnt).hide();
    }
});

jsFiddle Demo

+1

gibberish Jul 24 '15 at 16:00

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...

Run code Hide result

-1

niXful-Autistic Jul 24 15 at 15:50

source to share

j08691 · Accepted Answer · 2015-07-24T15:49:22+0000

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 -->

Run code Hide result

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.

How to hide a div when another div is empty

More articles: