showing hidden div with jquery

Question

I want to display a div content with jquery if a button is pressed. For example,

<button id="b1">Show text</button>

if the button is pressed then show this text div.

<div id="text">hello world.</div>

I've tried to use the jquery functions "fadein", "toggle", "slidedown".. however I have a problem that by default it shows the div content. I want that by default it hides the content, and shows only if the button is clicked. How I can do this? I'll highly appreciate your help with some basic example if possible.

Answer 1

Define a css rule for that div:

div#text {
   display: none;
}

This will ensure that the element is hidden from the start.

Example: http://www.jsfiddle.net/GkFu4/5/

Answer 2

Set the div's display style attribute to 'none', either inline, or using a CSS class.

<!-- inline -->
<div id="text" style="display:none">hello world.</div>


// css class
#text { display: none; }

Answer 3

If you want to use toggle, see the jQuery api. http://api.jquery.com/toggle/ Or another example. http://jsbin.com/obumi3/