jQueryでアコーディオンパネルを実装してみます。
サンプルも設置してますので、動作の確認が出来ます。
サンプル
- タイトル１
- 本分本分本分本分本分本分本分本分本分本分
- タイトル２
- 本分本分本分本分本分本分本分本分本分本分
- タイトル３
- 本分本分本分本分本分本分本分本分本分本分
↑閉じているタイトルをクリックすると本文が表示されます。
設置コード
javascript
まずは、htmlソースのhead内でjqueryを読み込みます。
[php]<script type=’text/javascript’ src=’jquery-1.6.1.min.js’></script>
[/php]
今回の動作を設定している以下のソースをhtmlソース内に適当に配置します。
[php]
<script type="text/javascript">
jQuery(function() {
jQuery("dd:not(:first)").css("display","none");
jQuery("dl dt").click(function(){
if(jQuery("+dd",this).css("display")=="none"){
jQuery(this).siblings("dd").slideUp("slow");
jQuery("+dd",this).slideDown("slow");
}
});
});
</script>[/php]
htmlソース
以下のようなソースを記述します。[php]
<dl>
<dt>テスト</dt>
<dd>aaaaaaaaaaaaaaaaaaa</dd>
<dt>テスト</dt>
<dd>aaaaaaaaaaaaaaaaaaa</dd>
<dt>テスト</dt>
<dd>aaaaaaaaaaaaaaaaaaa</dd>
</dl>
[/php]
css
[php]<style type="text/css">
* {
margin:0px;
padding:0px;
}
dl{
width:400px;
margin:50px auto;
}
dl dt {
background:#eeeeee;
border-bottom:1px solid #dddddd;
cursor:pointer;
}
dl dd {
border:1px solid #cccccc;
border-top:none;
height:100px;
}
</style>[/php]
今回のサンプルでは、タイトル１の本文が最初に開いた状態ですが、javascript内の
(“dd:not(:first)”)となっているところを
(“dd”)とすると、最初は全てが閉じられており、クリックされて初めて、本文が読めるといった感じになります。