Hide a div when another is empty

Question

Hi, its my fisrt question, cause i dont find a answer in the search...

Its possible to hide a div, when another is empty? Here is the case:

<div id='TwitterTrackbacksWrapper'>
<h4><img align='bottom' alt='Twitter Trackbacks' src='http://Imagens/twitter-bird.png'/&gt; twitter trackbacks</h4>
<div class='twitter-trackbacks' id='twitter-trackbacks'/>
</div>

I want to hide/remove the whole Div ID TwitterTrackbacksWrapper when there is nothing to show on a div/class twitter-trackbacks. That is possible?

Answer 1

Sure, when you populate the data for the "twitter-trackbacks" area, if its empty, set the style of the TwitterTrackbacksWrapper to display: none.

Answer 2

On your onload of the page, check the twitter-trackbacks div's innerHtml property. If empty. set the style property of the TwitterTrackbacksWrapper to display:'none'.

Something like:

function hideIfEmpty()
{
  var inner = document.getElementById("twitter-trackbacks");
  if (inner.innerHTML=="")
    document.getElementById("TwitterTrackbacksWrapper").style="display:none;";
}

Answer 3

This solution works using JQuery.

if ($('#TwitterTrackbacksWrapper').html().length == 0) {
    //Then, there is nothing in the div 
    //Please remove me.
}

Let me know if it helps.