Hide widget if empty

Question

I have a div which is used to display alerts to the user:

<div id="page-alerts" style="margin:25px 0;"></div>

Problem

Example in Jsfiddle

For reasons of formatting, it contains margins above and below, causing a blank space equal to the value of the margins, when empty, which breaks the layout.

Question

How to hide the div when it is empty (no alerts...) ?

Answer 1

You can use the pseudo-selector :empty in your CSS to handle childless elements (text or sub-elements)

#page-alerts {
     margin:25px 0;
}

#page-alerts:empty {
     margin: 0;
}

Example in jsFiddle. This selector works on all browsers except IE8 or earlier. In the example above I have margin as 0, but you could use for example display: none if you want to hide the element at all.

Note: this rule worked well on your fiddle because you used CSS to assign style; if you assign style inline (as in your question code) so I think it will take precedence over the CSS rules. In this case, only using Javascript to solve. Example:

$("#page-alerts")
    .toggle(!$("#page-alerts").is(":empty"))
    .bind("propertychange DOMSubtreeModified", function() {
        $(this).toggle(!$(this).is(":empty"));
    });

(Source code to listen for modifications in div: this answer no SOEN; no mention of which browsers support the event DOMSubtreeModified, but that other answer says he can be replaced by propertychange in IE)

Answer 2

Set the div as default

display:none

Then when filling the div with the content put the

display:block

If you use Jquery

$(elemnto).show()
$(elemnto).hide()