銀色うつ時間

思い出すたび何か胸につっかえてるだけ

jQueryでお手軽アコーディオンパネル

jQuery

http://ascii.jp/elem/000/000/498/498710/

こちらで「40分で覚える！Query速習講座」なるものがあったので、ささっと実装。jQueryもだけど、javascriptの基礎を勉強していきたい。

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("dd:not(:first)").css("display","none"); //2つ目以降のddのcssを非表示にする
  $("dl dt").click(function(){ //clickされたらfunction以下を行う
    if($("+dd",this).css("display")=="none"){
//セレクターで指定した要素のdisplayプロパティがnoneなら、{…}内に書かれた命令を実行する。この場合はクリックされたdl要素の次にくるdd要素を示す。
      $("dd").slideUp("normal");
      $("+dd",this).slideDown("normal");
    }
  });
});
</script>
<style type="text/css">
*{
  margin:0;
  padding:0;
  }
dl{
  width:400px;
  margin:50px auto;
  }
dl dt{
  background:#7CADB6;
  border-bottom:1px solid #FFFFFF;
  cursor:pointer;
  }
dl dd{
  border:1px solid #7CAD86;
  border-top:none;
  height:300px;
  }
</style>
</head>
<body>
<dl>
  <dt>text</dt>
  <dd>
    <p>text................text</p>
  </dd>
  <dt>text2</dt>
  <dd>
    <p>text................text</p>
  </dd>
  <dt>text3</dt>
  <dd>
    <p>text///////////////</p>
  </dd>
</dl>
</body>
</html></span></span></span>

これもASCIIの転載ですが、こんな感じで動きます。

http://editors.ascii.jp/m-kobashigawa/jquery_sample/special/sample5.html