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?
Set display: none property of the div that needs to be displayed. Use . toggle() method to display the 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.
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.
Yes you can use style
like this:
<div class="toshow" style="display:none"></div>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With