[ jQuery ] アコーディオンパネル - テキスト p１３ -
<body>
<div id="container">
<dl>
<dt>テキスト１</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト２</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト３</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
</div><!-- container -->
</body>
<style>
*{
margin: 0;
padding: 0;
}
dl {
width: 400px;
margin: 50px auto;
}
dl dt {
background: #7CADB6;
border-bottom: 1px solid #FFF;
cursor: pointer;
}
dl dd {
border: 1px solid #7CADB6;
border-top: none;
height: 300px;
}
</style>
<script>
$(function( ) {
$("dd:not(:first-of-type)").css("display", "none");
$("dl dt").click(function( ) {
if($("+dd", this).css("display")=="none") {
$("dd:visible").slideUp("slow");
$("+dd", this).slideDown("slow");
}
});
});
</script>
※ポイント
<dl>
<dt></dt>
<dd><p></p></dd>
</dl>
が基本の形になる。
