Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hiding a div by default

Tags:

jquery

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?

like image 967
The Learner Avatar asked Apr 29 '13 05:04

The Learner


People also ask

How can I make a div invisible by default?

Set display: none property of the div that needs to be displayed. Use . toggle() method to display the Div.

Can you hide a div?

We hide the divs by adding a CSS class called hidden to the outer div called . text_container . This will trigger CSS to hide the inner div.

How do I completely hide a div in CSS?

You can hide an element in CSS using the CSS properties display: none or visibility: hidden . display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.


2 Answers

Yes you can use style like this:

<div class="toshow" style="display:none"></div> 
like image 132
4b0 Avatar answered Sep 19 '22 08:09

4b0


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.

like image 27
PSL Avatar answered Sep 23 '22 08:09

PSL