How can I make this code appear with jQuery

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/

Answer 2

To make it invisible, add display: none; to the style attribute - or better yet add it to a class. On what condition would you like to make it appear, mouseover, click, etc?

This should work for a click event:

HTML

<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>

<a href="#" id="show">Show div</a>

JS

$("#show").click(function() {
    $("#Activity").show();
});

Answer 3

to hide on load, do this

$(function(){
    $("#Activity").hide();
});

to make it visible do

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

Answer 4

You can hide the div on pageload like this:

$(document).ready(
  function{
    $("#Activity").hide();
  }
);

And then unhide when you need to show it.

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

Answer 5

html

<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>

css

#Activity{
    display:none;
}

script

function showThat(){
    $("#Activity").show()
}

if u want to make it visible use showThat() function or $("#Activity").show()

Answer 6

if you want to show it when you run some javascript you can either put the:

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

in that javascript:

function run(){
  some code;
  $('#Activity').show();
}

or put it in a function, and call the function from anywhere you like:

function showActivity(){
    $('#Activity').show();
}
$().ready(function() {
    showActivity();
});

Answer 7

You can include it in your jquery script and use append to put it where you want, search here: enter link description here

Something along the lines:

    var 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>"

$("element_you_want_to_append_to").append(code);