jQueryで隠されたDivを表示します

Question

ボタンが押されている場合、jQueryを使用してdivコンテンツを表示したいと思います。例えば、

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

ボタンが押されている場合は、このテキストdivを表示します。

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

jQuery関数「Fadein」、「Toggle」、「Slidedown」を使用しようとしました。ただし、デフォルトでDivコンテンツを表示する問題があります。デフォルトでは、コンテンツを隠し、ボタンがクリックされた場合にのみ表示されます。どうすればこれができますか？可能であれば、いくつかの基本的な例であなたの助けに感謝します。

Answer 1

そのためのCSSルールを定義します div:

div#text {
   display: none;
}

これにより、要素が最初から隠されていることが保証されます。

例： http://www.jsfiddle.net/gkfu4/5/

Answer 2

Divのディスプレイスタイル属性をインラインまたはCSSクラスの使用のいずれかに設定します。

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


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

Answer 3

トグルを使用する場合は、jQuery APIを参照してください。 http://api.jquery.com/toggle/または別の例。 http://jsbin.com/obumi3/