Wrapper

Keywords: 
Situation: 

You want to apply an effect to a group of HTML elements.

Actions: 

Wrap them in a container tag. Give the wrapper an id.

Explanation: 

Suppose your app computes an answer. You want to show the answer with some other HTML. You write this:

<h2>Got it!</h2>
<p>The answer is <span id="answer-out"></span>.</p>
<p>Woohoo!</p>

In your JS, you compute the variable answer, and inject it into the HTML:

$("#answer-out").html(answer);

You want the output region – the <h2> and both <p> tags – to be hidden to start with, then show all at once.

The wrapper pattern does the job. Wrap the output region in a container tag, usually a <div>, and give it an id:

<div id="output-region">
    <h2>Got it!</h2>
    <p>The answer is <span id="answer-out"></span>.</p>
    <p>Woohoo!</p>
</div>

Now you can treat the <h2> and both <p> tags as a single unit.

$("#answer-out").html(answer);
$("#output-region").show("slow");