jQueryでアコーディオンの制作 - 情弱エンジニアのなかのblog

アプリの制作をしていまして、アコーディオンを使ったメニューを制作したので手順等を記載いたします。

まずはHTMLは以下のように記載いたしました。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>アコーディオン</title>
        <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
        <script type="text/javascript" src="js/menu.js"></script>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="menu">
            <dl id="panel">
                <dt>タイトル1</dt>
                <dd>コンテンツコンテンツコンテンツコンテンツ</dd>
                <dt>タイトル2</dt>
                <dd>コンテンツコンテンツコンテンツコンテンツ</dd>
                <dt>タイトル3</dt>
                <dd>コンテンツコンテンツコンテンツコンテンツ</dd>
                <dt>タイトル4</dt>
                <dd>コンテンツコンテンツコンテンツコンテンツ</dd>
                <dt>タイトル5</dt>
                <dd>コンテンツコンテンツコンテンツコンテンツ</dd>
                <dt>タイトル6</dt>
                <dd>コンテンツコンテンツコンテンツコンテンツ</dd>
            </dl>
        </div>
    </body>
</html>

CSSは以下のようにしておきます。

.menu {
    border: solid #56df55;
}
.menu dt {
    background-color: #afeeee;
}
.menu dd {
    background-color: #e0ffff;
}

この状態でブラウザ確認するとこうなります

f:id:nonaka-katuma-hal:20170914175333j:plain

こちらを「タイトル〇」と書かれた部分を押して「コンテンツ～」を表示するようにいたします。

jsファイルは以下のように作ります。

//メニューのアコーディオン
$(function() {
    //デフォルトは全てのタイトルを非表示にします
    $('#panel > dd').hide();

    //メニューのクリックを取得します。
    $('#panel > dt').click(function(){
        //クリックしたタイトルを開閉します
        $('+dd', this).slideToggle(200);
    });
});

これで「タイトル〇」と書かれた部分をクリックすると「コンテンツ～」が表示されるようになります、もう一度「タイトル〇」を押すと「コンテンツ～」が閉じます。

f:id:nonaka-katuma-hal:20170914175717j:plain

それでは