2011年06月16日 jQuery・javascript
jQueryでアコーディオンパネルを実装してみます。 サンプルも設置してますので、動作の確認が出来ます。

サンプル

タイトル1
本分本分本分本分本分本分本分本分本分本分
タイトル2
本分本分本分本分本分本分本分本分本分本分
タイトル3
本分本分本分本分本分本分本分本分本分本分
↑閉じているタイトルをクリックすると本文が表示されます。

設置コード

javascript まずは、htmlソースのhead内でjqueryを読み込みます。
<script type='text/javascript' src='jquery-1.6.1.min.js'></script>
今回の動作を設定している以下のソースをhtmlソース内に適当に配置します。
<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>
htmlソース 以下のようなソースを記述します。
<dl>
   <dt>テスト</dt>
   <dd>aaaaaaaaaaaaaaaaaaa</dd>
   <dt>テスト</dt>
   <dd>aaaaaaaaaaaaaaaaaaa</dd>
   <dt>テスト</dt>
   <dd>aaaaaaaaaaaaaaaaaaa</dd>
</dl>
css
<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>
今回のサンプルでは、タイトル1の本文が最初に開いた状態ですが、javascript内の (“dd:not(:first)”)となっているところを (“dd”)とすると、最初は全てが閉じられており、クリックされて初めて、本文が読めるといった感じになります。

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

javascriptでGETパラメータを取得する

2012年02月02日 jQuery・javascript
javascriptでGETパラメータを受信するには以下の関数を使うと簡単です。 関数を定義する 以下のコードをコピペしてください。 [php]function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?')…
「javascriptでGETパラメータを取得する」をはてなブックマークに追加

Twitter Bootstrapでスマホ回転時の表示崩れ

2013年11月13日 WordPressjQuery・javascript
Twitter Bootstrapを使用して、レスポンシブなウェブサイトを制作していたのですが、iPhoneで縦画面、横画面での表示を繰り返すと画面からはみ出してしまう(拡大表示した時のように画面内にサイトが収まっていない)現象に悩まされました。 もちろん、縦でも横でも画面横幅ピッタリにサイトが表示されるのが理想なので、調べてみました。 今回使用していたのは、Bootstrap v3.…
「Twitter Bootstrapでスマホ回転時の表示崩れ」をはてなブックマークに追加

jQuery Ratyでレーティング(評価)表示

2013年10月21日 WordPressjQuery・javascriptphp
jQuery Ratyでレーティング(評価)表示
ホームページやブログの記事なんかにスター評価を表示させたい場合は、jQuery Ratyで簡単に設定出来ます。 jQuery Raty - A Star Rating Plugin ダウンロード まずは、必要なファイルを以下からダウンロードします。ダウンロードしたファイルを解凍して、jquery.raty.min.jsとimgフォルダ(星の画像)を任意の場所にアップロー…
「jQuery Ratyでレーティング(評価)表示」をはてなブックマークに追加

jQueryを使って、文字をゆっくり消す

2011年06月15日 jQuery・javascript
jQueryのfadeOutを使って、クリックされた文字をゆっくり消します。 サンプルも設置しているので、ご確認ください。 …
「jQueryを使って、文字をゆっくり消す」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy