アコーディオンメニュー

アコーディオン

まずすべてを閉じる
どれかひとつのセクションがクリックされたら
クリックされたセクションを開く
開いていたセクションを閉じる

DEMO

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アコーディオンパネル：方丈記</title>
<style type="text/css">
<!--
*{
	margin:0;
	padding:0;
  font-family:
    "Hiragino Kaku Gothic Pro",
    "ヒラギノ角ゴ Pro W3",
    Meiryo, 
    "メイリオ", 
    Osaka, 
    "MS P Gothic", 
    "ＭＳ Ｐゴシック", 
    sans-serif;
}
dl{
	width: 400px;
	margin: 50px auto;
}
dt{
	font-weight: bold;
	border-bottom: 1px solid #FFFFFF;
	cursor: pointer;
	padding: 8px 8px 8px 12px;
	color: #FFF;
	background-color: #369;
}
dd{
	border: 1px solid #369;
	border-top: none;
	height: 100px;
	padding: 12px;
}
-->
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("dd:not(:first)").css("display","none");
  $("dl dt").click(function(){
    if($("+dd",this).css("display")=="none"){
      $(this).siblings("dd").slideUp("slow");
      $("+dd",this).slideDown("slow");
    }
  });
});
</script>
</head>
<body>
<div id="container">
<dl>
<dt>【ゆく河の流れ】</dt>
<dd>
　ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうたかたは、かつ消え､かつ結びて、久しくとどまりたる例(ためし)なし。世の中にある人と､栖(すみか)とまたかくのごとし。
</dd>
<dt>【安元の大火】</dt>
<dd>
　予（われ）、ものの心を知れりしより、四十（よそぢ）あまりの春秋（しゅんじう）をおくれるあひだに、世の不思議を見る事ややたびたびになりぬ。
</dd>
<dt>【治承の辻風】</dt>
<dd>
　また、治承（ぢしよう）四年卯月（うづき）のころ、中御門京極（なかみかどきやうごく）のほどより大きなる辻風（つじかぜ）起こりて、六条わたりまで吹けることはべりき。
</dd>
</dl>
</div>
</body>
</html>

最初からすべて閉じた場合

DEMO

  $(function(){
    $("dl dd").hide();
    $("dl dt").click(function(){
      $("dl dd").slideUp();
      if($("+dd",this).css("display")=="none"){
        $("+dd",this).slideDown();
      }
    });
  });