41

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

<body>

<div class="toshow">
</div>
</body>

so by default when the page is displayed all this content is seen the user. Is there a way that I can hide it bydefault?

7 Answers 7

87

Yes you can use style like this:

<div class="toshow" style="display:none"></div>
0
16

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.

8

You can use CSS display:

.toshow
{
    display: none;
}
2
.toshow{
         display:none;
  }

or

.toshow{
       visibility:hidden;
         }
2

To do it in the body:

<body>

<div class="toshow" style="display:none">
</div>

</body>

Although I would avoid inline css

1
$('#myDiv').hide();

$("myDiv").css("visibility", "hidden");

.toshow {
  visibility:hidden;
  display:none;
 }
2
  • I dont want to do in css. is there a way I do in the <body> Apr 29, 2013 at 5:53
  • 1
    Why use jquery while you can do direct css? Apr 29, 2013 at 6:04
1

You can use jQuery to change the CSS styles of 'toshow' class adding "display: none". for example

$(function(){
    $('.toshow').css("display", "none");
});
3
  • Please try to avoid just dumping code as an answer and try to explain what it does and why. Your code might not be obvious for people who do not have the relevant coding experience. Please edit your answer to include clarification, context and try to mention any limitations, assumptions or simplifications in your answer.
    – Frits
    May 26, 2017 at 5:21
  • Thank you everyone, for helping me to improve my answer, but question has been changed when I replied on it. Have changed my answer according to the new problem. :)
    – Priyangna
    May 26, 2017 at 7:06
  • Even after your changes your answer for was using outdated jQuery you should also not affect the style of attribute when using jQuery should use the css modifier function
    – Barkermn01
    May 26, 2017 at 15:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.