jQuery: Bind an element to show / hide when its contents are changed

Question

Let's say I have messages on my page:

<div class="message one">Here is some text.</div>
...
<div class="message two">Here is other text for something else.</div>

I have a lot of events that may either put some text in the message, or clear it out.

Right now I have this setup where every message sending function call is also checking if the message is visible or not and changing the state as needed. That means there's a lot of duplication of this basic logic.

I would like to setup a binding that is triggered when any message div is changed, so that if it is set to empty it slides up, and if it is set from empty to having text, then it slides down.

Is that possible, and if so, how?

Answer 1

Per this link, this would be called a "mutation event" which is not supported in JQuery: Detect element content changes with jQuery

I'd recommend simply creating a helper function to consolidate the logic into one place. Eg:

function updateElement(selector, newText)
{
    $(selector).text(newText);
    if (newText == '') $(selector.slideUp());
    else $(selector.slideDown());
}