スライド開閉式の定義リストを、jQueryで作る方法。
実装例（サンプル）
- 用語１
用語１の説明文１
用語１の説明文２
- 用語２
用語２の説明文１
用語２の説明文２
- 用語３
用語３の説明文１
用語３の説明文２
実装例（サンプル）の動作について
「用語１～３」をクリックすると、クリックした用語の説明文を、スライドダウンで出現させる。再度クリックすると、スライドアップで非表示にする。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample dt' ) . toggle(
function () {
jQuery( this )
. nextUntil( 'dt' )
. slideDown( 1000 );
},
function () {
jQuery( this )
. nextUntil( 'dt' )
. slideUp( 1000 );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample dt' ) . toggle(
function () {
jQuery( this )
. nextUntil( 'dt' )
. slideDown( 1000 );
},
function () {
jQuery( this )
. nextUntil( 'dt' )
. slideUp( 1000 );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample dt {
cursor: pointer;
font-weight: bold;
}
#jquery-sample dd {
display: none;
}
-->
</style>
<!--
#jquery-sample dt {
cursor: pointer;
font-weight: bold;
}
#jquery-sample dd {
display: none;
}
-->
</style>
HTML
<dl id="jquery-sample">
<dt>用語１</dt>
<dd><p>用語１の説明文１</p></dd>
<dd><p>用語１の説明文２</p></dd>
<dt>用語２</dt>
<dd><p>用語２の説明文１</p></dd>
<dd><p>用語２の説明文２</p></dd>
<dt>用語３</dt>
<dd><p>用語３の説明文１</p></dd>
<dd><p>用語３の説明文２</p></dd>
</dl>
<dt>用語１</dt>
<dd><p>用語１の説明文１</p></dd>
<dd><p>用語１の説明文２</p></dd>
<dt>用語２</dt>
<dd><p>用語２の説明文１</p></dd>
<dd><p>用語２の説明文２</p></dd>
<dt>用語３</dt>
<dd><p>用語３の説明文１</p></dd>
<dd><p>用語３の説明文２</p></dd>
</dl>