mostrando div escondida con jQuery

Question

Quiero mostrar un contenido div con jquery si se pulsa un botón. Por ejemplo,

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

Si se pulsa el botón a continuación, mostrar este div texto.

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

He tratado de utilizar las funciones de jQuery "FadeIn", "cambiar", "slideDown" .. Sin embargo tengo un problema que por defecto se muestra el contenido div. Quiero que por defecto se esconde el contenido, y muestra sólo si se hace clic en el botón. ¿Como puedo hacer esto? Voy a apreciar mucho su ayuda con algún ejemplo básico, si es posible.

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/