ボタンやリンクなどをクリックしたら、みょいーんとDIVやらpで括ってた部分を表示させるというのを実装する、jQuery のtoggleSlideを使う方法。
これも検索頻度の高いものなので、自分のメモとして残しておきます。
toggleSlide の使用例
「クリック」ってところをクリックすると、「ここが開いて表示されるよ！」ってところが表示されるようにしてみます。
サンプルhtml
まずはこんな html を書いてみます。
|
1 2 3 4 5 6 7 |
<span id="slideClick">クリック</span> <div id="target"> ここが開いて表示されるよ！<br /> ここが開いて表示されるよ！<br /> ここが開いて表示されるよ！ </div> |
サンプルJavascript
次に、javascriptです。htmlのヘッダに記述。
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> jQuery(function($){ $('#slideClick').click(function(){ $('#target').slideToggle('slow'); }); }); </script> |
slow と書いてある所は、アニメーション速度となります。
“slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定。
例えば “1500” であれば、1.5秒かけてアニメーションが行われます。
省略された場合は、”normal” となります。
忘れていましたが、jQueryライブラリ本体をロードしてからスクリプトを書いてください。
ロードの方法はこちらから。
jQueryをGoogle Libraries API から読み込む方法
散々いろんな所で書かれている jQuery のロード方法ですが、何度も調べるのが面倒なので忘備録としてメモっておきます。
nodoame.net
2012.07.27
