Here is the other function nested inside our hidden element. It will hide our element again, after the element has been displayed:
<div id="ourExample">
<p>This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM.</p>
<p style="text-align:center;"><a href="javascript:void(0);"
onclick="hideOurExample(); return false;">Close this note</a></p>
</div>
<p>This is the element, and hence its content, that are hidden from view by the CSS and are displayed through the DOM.</p>
<p style="text-align:center;"><a href="javascript:void(0);"
onclick="hideOurExample(); return false;">Close this note</a></p>
</div>
Notice the p tags nested inside the div tags. Also notice the CSS that we've added inside. This is possible, because the standards have been developed to work together. Let's see the results, next . . .