アコーディオンメニューの作り方

JavaScript
jQuery

ウェブサイトで折りたたみできるメニュー(アコーディオンメニュー)の作り方です。JQueryを使う方法とスタイルシートのみで実現する方法の2パターン用意しました。
開閉のアイコンはFont Awesomeを使っています。

JQuery を使う

見出し(arrow-tab)クリック時に現在設定されている開閉のクラスを判定し、反対のクラスに置き換えることで開閉を行っています。同時にアイコンも差し替えます。

JavaScriptファイル

下記を記述したファイルをopenclose.jsという名前で保存します。 

$(function(){
    $('.arrow-tab').click(function(){
        if ($(this).parent().hasClass('collapsed')) {
            $(this).parent().removeClass('collapsed');
            $(this).parent().addClass('expanded');
            $(this).find('i').removeClass('fa-chevron-circle-down');
            $(this).find('i').addClass('fa-chevron-circle-up');
            fa-chevron-circle-down
        } else {
            $(this).parent().removeClass('expanded');
            $(this).parent().addClass('collapsed');
            $(this).find('i').removeClass('fa-chevron-circle-up');
            $(this).find('i').addClass('fa-chevron-circle-down');
        }
    });
});

HTML ファイル

<head>に下記を追加します。 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="openclose.js"></script>

メニュー部分。 

<div class="collapsed">
    <div class="arrow-tab">
        <p>Category<i class='fa fa-chevron-circle-down arrow'></i></p>
    </div>
    <ul>
        <li>Category I</li>
        <li>Category II</li>
    </ul>
</div>

<div class="collapsed">
    <div class="arrow-tab">
        <p>Tag<i class='fa fa-chevron-circle-down arrow'></i></p>
    </div>
    <ul>
        <li>Tag A</li>
        <li>Tag B</li>
    </ul>
</div>

スタイルシート

ul {
    background-color: #fce4ec;
    line-height: 32px;
    margin:0;
    padding-left: 32px;
    width: 168px;
}

.arrow {
    float: right;
    padding-right: 2px;
    padding-top: 2px;
}

.expanded ul {
    display: block;
}

.collapsed ul {
    display: none;
}

.arrow-tab {
    background-color: #1976D2;
    width: 200px;
}

p {
    color: #FFF;
    margin: 16px 0 0 0;
    padding-left: 8px;
}

表示イメージ

accordion-menu-js

スタイルシートのみ

非表示にしてあるcheckboxチェック・非チェックで開閉を行っています。見出し部分は<label>とし、クリック時の対象をcheckboxにします。
A ~ BのCSSセレクタ(~)はA以降にある兄弟(同階層)のBを表します。難点は見出しの数だけ#idが必要になることです。

HTML ファイル

<div class="menu-conainer">
    <input id="menu-1-toggle" type="checkbox" />
    <label for="menu-1-toggle" class="menu-title">Category<i class="arrow"></i></label>
    <div id="openclose-menu-1">
        <ul>
            <li>Category I</li>
            <li>Category II</li>
        </ul>
    </div>
</div>

スタイルシート

ul {
    background-color: #fce4ec;
    line-height: 32px;
    margin:0;
    padding-left: 32px;
    width: 168px;
}

.arrow {
    float: right;
    padding-right: 2px;
    padding-top: 2px;
}

.menu-conainer {
    margin: 16px 0 0 0;
    width: 200px;
}

.menu-title {
    background-color: #1976D2;
    color: #FFF;
    display: block;
    padding-left: 8px;
}

#menu-1-toggle {
    display: none;
}

#openclose-menu-1 {
    display: none;
}

#menu-1-toggle:checked ~ #openclose-menu-1 {
    display: block;
}

#menu-1-toggle ~ label i:after {
    content: "\f13a";
    font-family: "Font Awesome 5 Free";  /* updated font-family */
    font-weight: 900; /* solid */
    font-style: normal;
}

#menu-1-toggle:checked ~ label i:after {
    content: "\f139";
    font-family: "Font Awesome 5 Free";  /* updated font-family */
    font-weight: 900; /* solid */
    font-style: normal;
}

表示イメージ

accordion-menu-css

サンプル

にほんブログ村 IT技術ブログへ

関連記事

コメント

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です