if div has content show div

Question

ok heres what i have... it works fine but it looks for a word rather than content. i just want it to show when there is any content..

 $(document).ready(func         


        

Answer 1

If you want to check for text, you can use the text() method:

 $(document).ready(function(){
   if ($("#box3").text().length > 0) {
     $('#third').show();
   }                                           
 });

Or for html:

 $(document).ready(function(){
   if ($("#box3").html().length > 0) {
     $('#third').show();
   }                                           
 });

Answer 2

You can also check for the HTML's length inside your selector:

if ($("#box3").html().length) {
    $('#third').show();
}       

Answer 3

Trim can be used to check the length

$(document).ready(function(){
   if ($("#box3").html().trim().length > 0) {
     $('#third').show();
   }                                           
});

Answer 4

For the updated question: Check the trimmed text of the inner <div>, like this:

 if ($.trim($("#box3 div").html())) {
   $('#third').show();
 }  

Previous answer: If you want to show if it has anything, then checking :not() against :empty works:

 if ($("#box3:not(:empty)").length) {
   $('#third').show();
 }  

If you want to check for any elements (not possibly whitespace only), then use :has(*), like this:

 if ($("#box3:has(*)").length) {
   $('#third').show();
 }  

Answer 5

You can also use the CSS3 selector :empty

div#empty-div:empty {
   display: none;
}

The :empty selector is only targeting just empty elements, without white space.