Hide a li if div is empty?

Question

I've looked around for about a week or so now trying various techniques but so far no luck.

I am using javascript based tabs to tab out content on a page. The content is dynamically generated from Wordpress custom fields. If the div has no content to display in the HTML I would like that corresponding tab to not appear. Is this possible?

my code is as such:

<ul class="tabs">
<li class="tab1"><a href="#view1">Tab 1</a></li>
<li class="tab2"><a href="#view2">Tab 2</a></li>
<li class="tab3"><a href="#view3">Tab 3</a></li>

<div class="tabcontents">

<div id="view1">

<div class="noScreen">
<h2>Tab 1</h2>
</div>

<div class="view1">
<?php the_field('tab1'); ?>
</div>

</div>
<!--end Tab1-->

<div id="view2">

<div class="noScreen">
<h2>Tab 2</h2>
</div>

<div class="view2">
<?php the_field('tab2'); ?>
</div>

</div>
<!--end Tab2-->

<div id="view3">

<div class="noScreen">
<h2>Tab 3</h2>
</div>

<div class="view3">
<?php the_field('tab3'); ?>
</div>

</div>
<!--end Tab1-->

</div>
<!--end tabcontents-->

So if Tab1 and Tab3 respond back with data from the post but Tab 2 is empty I would like to hide the li for Tab 2 up above.

Can anyone help?

thank you in advance

Answer 1

I had to fix some missing tags and quotes from your HTML above, but this seems to do the trick.

JSFiddle:

http://jsfiddle.net/Q27K6/

$(function(){
    $('div.tabcontents > div').each(function(index){
        var innerView = $(this).find('div[class^="view"]');
        var innerHtml = $(innerView).html();
        if(innerHtml.trim() == ''){
            $(this).hide();
            $('ul.tabs').find('li').eq(index).hide();
        }
    });
});

Answer 2

instead of using the_field (which prints info) see if theres a get_field function that returns info. That way you could decide beforehand if the div will be empty.

$tab2content=get_field('tab2');
if(!empty($tab2content)) {
    echo '<div id="view2">';
    echo '<div class="noScreen"><h2>Tab 2</h2></div>';
    echo '<div class="view2">'.$tab2content.'</div>';
    echo '</div>';
}

If that doesn't work, after your contents is loaded and any ajax calls are resolved, you could tell if the div was empty by running

if(jQuery('.view2').html()==='') {
    jQuery('#view2').hide();
}

However, keep in mind that if your DOM has more than one elements with view2 class, the html() method will yield the contents of the first one that matches.

Answer 3

You want to know if the contents of <div class='view2'> is empty? div id='view2'> will never be empty, so I'll assume it's the former.

So, whether it is empty or not depends on whether there is anything returned from the php function the_field('tab2'), right?

So, one way of solving the problem is to do it on the server, by checking if the function the_field('tab2') (or whatever) is empty. That's slightly convoluted in php though.

Or in javascript:

$().ready(function() {

  var hideTab = function(index) {
    var $view = $('.view' + index)
      , $tab = $('.tab' + index);
    if($.trim($view.html()).length === 0) {
      $tab.hide();
    }
  }

  // Stick this in a loop to make it neater
  hideTab(1);
  hideTab(2);
  hideTab(3);
});