【jQuery】details要素・summary要素でアコーディオン【メモ】

デモはこちら

実装

HTML（ベースの構造と動作）

<details class="c-accordion js-accordion">
    <summary class="c-accordion__title js-accordion__title">
        <span class="c-accordion__title__icon">Q</span>よくある質問ですか？
    </summary>
    <div class="c-accordion__content js-accordion__content">
        <span class="c-accordion__content__icon">A</span>
        <div class="c-accordion__content_inner">
            <p>
                よくある質問の答えが入ります。
            </p>
        </div>
    </div>
</details>

CSS（見た目）

/* summary部分のスタイリング */
.c-accordion__title{
    cursor: pointer;
    display: flex;/* list-item以外にする */
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #d2beff;
}
.c-accordion__title::-webkit-details-marker{
    display: none;/* safariでマーカーを消す */
}

/* 自作マーカーを表示 */
.c-accordion__title::after{
    content: "＞";
    margin-left: auto;
    transform: rotate(90deg);
}

/* 開いている場合の処理 */
[open] > .c-accordion__title::after{
    transform:rotate(-90deg);
}

/* Q・Aのアイコン部分のスタイリング */
.c-accordion__title__icon,
.c-accordion__content__icon{
    width: 2rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* コンテンツ部分のスタイリング */
.c-accordion__content{
    display: flex;
    padding: 1rem;
}
.c-accordion__content_inner{
    flex-grow: 1;
}

jQuery（アニメーション）

    let accordionDetails = '.js-accordion';
    let accordionSummary = '.js-accordion__title';
    let accordionContent = '.js-accordion__content';
    let speed = 200;

    $(accordionSummary).each(function (){
        $(this).on("click",function (event){
            // デフォルトの挙動を無効化
            event.preventDefault();
            if($(this).parent($(accordionDetails)).attr("open")){
                // アコーディオンを閉じるときの処理
                $(this).nextAll($(accordionContent)).slideUp(speed,function (){
                    // アニメーションの完了後にopen属性を取り除く
                    $(this).parent($(accordionDetails)).removeAttr("open");
                    // display:none;を消して、ページ内検索にヒットするようにする
                    $(this).show();
                });
            }else{
                // アコーディオンを開くときの処理
                // open属性を付ける
                $(this).parent($(accordionDetails)).attr("open","true");
                // いったんdisplay:none;してからslideDownで開く
                $(this).nextAll($(accordionContent)).hide().slideDown(speed);
            }
        })
    })

ポイント

ページ内検索にヒットさせるポイント

• コンテンツ部分はdisplay:noneしない
  • アニメーション動作のために、jQueryではslideUp / slideDown を使ったが、それだと閉じている際にdisplay:none;になってしまう。
  • display:none;になっている要素はページ内検索にヒットしない。
  • details要素にopen属性がついたら、display:none;を消す（.show()）をすることが大切。

デモはこちら