jQueryで作るスライド開閉式定義リスト

スライド開閉式の定義リストを、jQueryで作る方法。

実装例(サンプル)

用語1

用語1の説明文1

用語1の説明文2

用語2

用語2の説明文1

用語2の説明文2

用語3

用語3の説明文1

用語3の説明文2

実装例(サンプル)の動作について

「用語1~3」をクリックすると、クリックした用語の説明文を、スライドダウンで出現させる。再度クリックすると、スライドアップで非表示にする。

実装例(サンプル)のソースコード

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>

CSS

<style type="text/css">
<!--
#jquery-sample dt {
    cursor: pointer;
    font-weight: bold;
}
#jquery-sample dd {
    display: none;
}
-->
</style>

HTML

<dl id="jquery-sample">
    <dt>用語1</dt>
        <dd><p>用語1の説明文1</p></dd>
        <dd><p>用語1の説明文2</p></dd>
    <dt>用語2</dt>
        <dd><p>用語2の説明文1</p></dd>
        <dd><p>用語2の説明文2</p></dd>
    <dt>用語3</dt>
        <dd><p>用語3の説明文1</p></dd>
        <dd><p>用語3の説明文2</p></dd>
</dl>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, リスト, 逆引き パーマリンク