If empty - hide divs

JavaScript
1

Hi,

I have a page with with div elements with the class “more”.
I want to hide them if they don’t include any content.
If there is text or an image in it nothing should happen to show it’s
content.

Any idea how to relize that? I’m using jQuery and probably I can
get all divs with the following line:

var more_content = $('div.more')[i];

But what comes next, a loop function and what do I have to do
then?

thanks
T.C.

2

You want to hide them if they’re empty, and nothing should happen to shows its content if it has text or an image.

That sounds contradictory. Can you please expand on what your requirements are?

3

I’m working with a CMS. Each content element is writing this <div class"more"> onto
the page no matter if it’s filled out or not by the editor. So looking at the html
source text of the page there could be this:

  1. …<div class=“more”></div>…
  2. …<div class=“more”><a href=“#”>Links</a></div>…
  3. …<div class…

Well the problem with this is that IEs don’t set the height of these divs to 0 if
it’s empty. So there is too much space between this and the following element
which isn’t allowed in the style guide. Hence I want to make a function which
hides (display: none) all empty divs with the class “more”.
Maybe there could be another solution to set min-height to 0 with a jQuery plugin
which makes this attriute also available to IE6.

4

The traditional javascript way is as follows:


var els = document.getElementsByTagName('div'),
    el,
    i;
for (i = 0; i < els.length; i += 1) {
    if (el.className === 'more') {
        if (!el.firstChild) {
            el.style.display = 'none';
        }
    }
}

In jquery that would be something like


$('#div.more:empty').hide();
5

thanks pmw57, it works perfectly :slight_smile: