Hiding a div by default

Question

I have a div that should be shown only when the user clicks the show button

$(\"div.toshow\").show();

I have written in the body

Answer 1

You can use either Display or Visibility

display:none|block|etc.. // This will not preserve the space for the div.
visibility:visible|hidden //This will preserve the space for the div but wont be shown.

If you use display your $("div.toshow").show(); will cause your element to jump up as the space wasn't preserved for it. That will not happen with Visibility.

One way to do this is have your dispay assigned to the class

.toshow
{
  display:none;
}

in your script:-

$("div.toshow").show();

Or Just provide:-

<div class="toshow" style="display:none;">...

 $("div.toshow").show();

When you do a .show() jquery just adds display:block inline style to your markup.