<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アコーディオンメニュー</title>
</head>
<body>
<div id="container">
<dl>
<dt>サンプル1</dt>
<dd>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</dd>
<dt>サンプル2</dt>
<dd>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</dd>
<dt>サンプル3</dt>
<dd>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</dd>
</dl>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
}
dl{
width:400px;
margin:50px auto;
}
dl dt{
background:#829FD9;
border-bottom:1px solid #FFFFFF;
cursor:pointer;
}
dl dd{
border:1px solid #829FD9;
border-top:none;
height:300px;
}
$(function(){
$("dd").css("display","none");
$("dl dt").click(function() {
if($("+dd",this).css("display")=="none") { //クリックされた要素の次に登場するdd要素がdisplay:noneの場合の処理
$("dd:visible").slideUp("fast"); //開いているdd要素は閉じる
$("+dd",this).slideDown("fast"); //クリックされたddを展開する
}
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.