2025.03.26

JavaScript

details / summary タグ + jQuery でスムーズに開閉するアコーディオンの実装

以前の記事で、detailsとsummaryタグを使ったアコーディオン（開閉）の作り方を紹介しました。

[HTML] detailsとsummaryタグでアコーディオン（開閉）コンテンツを作る

今回は、その方法に jQuery を追加し、HTML＋CSS だけでは不完全だったアニメーションをスムーズに実装する手法を紹介します。
※jQuery が無効な環境でも、details / summary 本来の開閉機能は動作する仕様です。

html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<details class="toggle-box">
  <summary class="toggle-header">Question</summary>
  <div class="toggle-content">
    <p>Answer　テキストが入ります。テキストが入ります。</p>
    <p>テキストが入ります。テキストが入ります。</p>
  </div>
</details>

<summary class="toggle-header">Question</summary>

<p>Answer　テキストが入ります。テキストが入ります。</p>

<p>テキストが入ります。テキストが入ります。</p>

</div>

</details>

css

.toggle-header {
    display: flex; /* display: list-item; 以外を指定してデフォルトの三角アイコンを消す */
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    background-color: #F7EBDF;
    cursor: pointer;
}
/* WebKitブラウザのデフォルトの三角アイコンを消す */
.toggle-header::-webkit-details-marker {
    display: none;
}

/* 開閉アイコン */
.toggle-header::after {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-right: 2px solid #DF4632;
    border-bottom: 2px solid #DF4632;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .5s;
    content: '';
}
.toggle-box[open] summary::after {
    transform: translateY(-50%) rotate(225deg);
}

/* 詳細 */
.toggle-content {
    position: relative;
    transform: translateY(-10px);
    margin: 0;
    padding: .3em 3em 1.5em;
    background-color: #F5F5F5;
    opacity: 0;
    transition: transform .5s, opacity .5s;
}
.toggle-box[open] .toggle-content {
    transform: none;
    opacity: 1;
}

/* Q、Aの文字を表示する場合に指定 */
.toggle-header::before ,
.toggle-content::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
    line-height: 1.2;
}
.toggle-header::before {
    color: #75bbff;
    content: "Q";
}
.toggle-content::before {
    top: 1.3rem;
    color: #ff8d8d;
    content: "A";
}

.toggle-header {

display: flex; /* display: list-item; 以外を指定してデフォルトの三角アイコンを消す */

align-items: center;

position: relative;

padding: 1em 2em 1em 3em;

background-color: #F7EBDF;

cursor: pointer;

}

/* WebKitブラウザのデフォルトの三角アイコンを消す */

.toggle-header::-webkit-details-marker {

display: none;

}

/* 開閉アイコン */

.toggle-header::after {

position: absolute;

top: 50%;

right: 15px;

width: 10px;

height: 10px;

margin-left: 10px;

border-right: 2px solid #DF4632;

border-bottom: 2px solid #DF4632;

transform: translateY(-50%) rotate(45deg);

transition: transform .5s;

content: '';

}

.toggle-box[open] summary::after {

transform: translateY(-50%) rotate(225deg);

}

/* 詳細 */

.toggle-content {

position: relative;

transform: translateY(-10px);

margin: 0;

padding: .3em 3em 1.5em;

background-color: #F5F5F5;

opacity: 0;

transition: transform .5s, opacity .5s;

}

.toggle-box[open] .toggle-content {

transform: none;

opacity: 1;

}

/* Q、Aの文字を表示する場合に指定 */

.toggle-header::before ,

.toggle-content::before {

position: absolute;

left: 1em;

font-weight: 600;

font-size: 1.3em;

line-height: 1.2;

}

.toggle-header::before {

color: #75bbff;

content: "Q";

}

.toggle-content::before {

top: 1.3rem;

color: #ff8d8d;

content: "A";

}

初期状態
- summary（.toggle-header）には display: list-item 以外を指定し、デフォルトの三角アイコンを非表示にする
- .toggle-content（回答部分）は opacity: 0 と transform: translateY(-10px) を指定し、非表示かつ少し上に位置した状態で待機させる

開いたときのアニメーション
- details（.toggle-box）に open 属性が付与されると、内部の .toggle-content が opacity: 1 になり表示される
- transform が none に戻り、上からスライドしてくるような視覚効果になる
- transition: transform .5s, opacity .5s; により、表示時のアニメーションが 0.5秒かけて再生される

jQuery

$(document).ready(function() {
  $(".toggle-header").on("click", function(event) {
    event.preventDefault(); // デフォルトの開閉を防ぐ

    let $details = $(this).parent(".toggle-box");
    let $content = $details.children(".toggle-content");

    if ($details.attr("open")) {
      // 閉じる処理
      $content.slideUp(300, function() {
          $details.removeAttr("open"); // アニメーション完了後に open を削除
      });
    } else {
      // 開く処理
      $details.attr("open", true);
      $content.hide().slideDown(300);
    }
  });
});

$(document).ready(function() {

$(".toggle-header").on("click", function(event) {

event.preventDefault(); // デフォルトの開閉を防ぐ

let $details = $(this).parent(".toggle-box");

let $content = $details.children(".toggle-content");

if ($details.attr("open")) {

// 閉じる処理

$content.slideUp(300, function() {

$details.removeAttr("open"); // アニメーション完了後に open を削除

});

} else {

// 開く処理

$details.attr("open", true);

$content.hide().slideDown(300);

}

});

jQuery の役割
- summary（.toggle-header）クリック時に、デフォルトの <details>/<summary> の開閉動作を event.preventDefault() で無効化し、独自の開閉制御を行う
- open 属性の有無によって現在の状態を判定する
閉じる処理
- .toggle-content を slideUp(300) で閉じ、アニメーション完了後に open 属性を削除
開く処理
- open 属性を追加したうえで、.toggle-content を slideDown(300) で表示

CSS のアニメーションは、この open 属性の付与・削除によって開始・終了する仕組みになっています。