jQueryのtoggleSlideを使ってみる
2013/06/05
ボタンやリンクなどをクリックしたら、みょいーんとDIVやらpで括ってた部分を表示させるというのを実装する、jQuery のtoggleSlideを使う方法。
これも検索頻度の高いものなので、自分のメモとして残しておきます。
「クリック」ってところをクリックすると、「ここが開いて表示されるよ！」ってところが表示されるようにしてみます。
まずはこんな html を書いてみます。
[html]
<span id="slideClick">クリック</span>
<div id="target">
ここが開いて表示されるよ！<br />
ここが開いて表示されるよ！<br />
ここが開いて表示されるよ！
</div>
[/html]
次に、javascriptです。htmlのヘッダに記述。
[js]
<script type="text/javascript">
jQuery(function($){
$('#slideClick').click(function(){
$('#target').slideToggle('slow');
});
});
</script>
[/js]
もちろん、jQueryライブラリ本体をロードしてから書いてください。
ロードの方法は一つ前のポスト参照ってことで。
「slow」と書いてある所は、アニメーション速度となります。
"slow"、"normal"、"fast"、もしくは完了までの時間をミリ秒単位で指定。
例えば "1500" であれば、1.5秒かけてアニメーションが行われます。
省略された場合は、"normal" となります。
■jQuery 日本語リファレンス
slideToggle([speed], [callback]) - jQuery 日本語リファレンス
[tgAmazonItemLookup asin="4844362720" related="1"]