制作Tipstutorials & tips

開閉パネル

jQueryを使った開閉パネルをひとつ。

ここで行うのは、あるブロックをクリックすると、その下にするするっと隠れていたテキストなどが表示されるというもの。よくFAQページなどで使われるアレです。


必要なのは、jQueryライブラリ本体と以下のスクリプトのみ。

ライブラリ本体はhttp://code.jquery.com/jquery-1.6.1.min.jsからダウンロードできます。ダウンロードしたライブラリと下記スクリプトを読み込み、htmlには適切にddやdtをマークアップしてあげましょう。



<script type="text/javascript" src="jquery-1.6.1.js"></script>←ライブラリ本体を読み込み・・・


<script type="text/javascript">←開閉パネル用のスクリプトを追加し・・・
$(document).ready(function(){
$("dd").hide();
$("dt").click(function(){
$(this).toggleClass("active").next().slideToggle("slow"); //←ここは他に「fast」や「middle」も使えます
});
});
</script>


<dl>←マークアップは以下のとおりにしてあげればOK。dtをクリックするとddが開閉表示されます
<dt>タイトル</dt>
<dd>表示されるテキストや画像など</dd>
</dl>

上部へ