jquery - 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 の表示スタイル属性を「なし」に設定します。

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


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

Answer 2

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

div#text {
   display: none;
}

これにより、要素が最初から非表示になります。

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

Answer 3

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