Question

I have the following HTML code:

<div id="Activity" class="rep_tb0" style="width: 100%">
    <div class="rep_tr0" style="width: 100%">
        <div class="rep_td0" style="width: 100%" id="ActivityLog">Activity Log<br /><br /></div>
    </div>
</div>

I would like for it to be invisible when the web page is opened and then for it to show visible when I run some javascript. Is there an easy way to do this with jQuery? How can I make it invisible and make it so no space is reserved for it when the web page starts up?

Answer 1

Use display:none; style to hide it:

<div id="Activity" class="rep_tb0" style="width: 100%; display:none;">
    <div class="rep_tr0" style="width: 100%">
        <div class="rep_td0" style="width: 100%" id="ActivityLog">Activity Log<br /><br /></div>
    </div>
</div>

To show with jquery:

$('#Activity').show();

Code: http://jsfiddle.net/s2bBw/1/