【完全版】details / summaryで作るアコーディオンアニメーション

<details class="details">
  <summary class="summary">タイトルが入ります</summary>
  <div class="details-content">
    <div class="details-content-inner">
      <p>アコーディオンのコンテンツが入ります</p>
    </div>
  </div>
</details>

<details class="details">
  <summary class="summary">タイトルが入ります</summary>
  <div class="details-content">
    <p>アコーディオンのコンテンツが入ります</p>
  </div>
</details>

/* コンテンツ */
.details-content {
	box-sizing: content-box;
	padding-block: 0;
}

/* コンテンツ（オープン時） */
.is-open .details-content {
	padding-block: 20px;
}

<div class="wrapper">

  <details class="details">
    <summary class="summary">タイトルが入りますか？</summary>
    <div class="details-content">
      <p>アコーディオンのコンテンツが入ります</p>
      <p>アコーディオンのコンテンツが入ります</p>
    </div>
  </details>
  
  <details class="details" open>
    <summary class="summary">タイトルが入りますか？</summary>
    <div class="details-content">
      <p>is-openクラスは自動で付与されます</p>
    </div>
  </details>
  
  <details class="details">
    <summary class="summary">タイトルが入りますか？</summary>
    <div class="details-content">
      <p>by <a href="https://blog-mi.com/details-summary/" target="_blank" rel="noopener noreferre">https://blog-mi.com/details-summary/</a>
      </p>
    </div>
  </details>

</div>

/* 幅の設定*/
.wrapper {
  max-width: 600px;
}

/* ===================
アコーディオン details/summary
====================== */
/* アコーディオン全体 */
.details {
	box-shadow: 0 0 0 1px #eee;
}

/* アコーディオンの間隔 */
.details + .details {
	margin-top:1em;
}

/* 三角アイコン削除（Safari） */
summary::-webkit-details-marker {
  display: none;
}

/* タイトル */
.summary {
	cursor: pointer;
	background-color: #eee;
	padding: 0.5em 1em 0.5em 1em;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1em;
	/* アイコンのはみ出し防止 */
	overflow: hidden;
}

/* アイコン共通 */
.summary::before,
.summary::after {
	/* アイコンの位置:1or2 */
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	content: '';
	width: 18px;
	border-bottom: 1px solid #333;
}

/* アイコン（クローズ時） */
.summary::before {
	transform: rotate(-90deg);
	transition: transform .3s;
}

/* アイコン（オープン時） */
.is-open .summary::before {
	transform: rotate(0deg);
}

/* コンテンツ */
.details-content {
	box-sizing: content-box;
	overflow: hidden;
	margin: 0;
	padding: 0 1em;
	opacity:0;
	transition: padding .2s ease .1s, max-height .3s, opacity .7s;
}

/* コンテンツ（オープン時） */
.is-open .details-content {
	padding-block: 1em;
	opacity:1;
	transition: padding .3s, max-height .3s, opacity .7s;
}

/* ===================
アコーディオン details / summary
====================== */
const ANIMATION_TIME = 300;
const OFFSET_TIME = 20;

document.addEventListener('DOMContentLoaded', function () {

	const accordions = document.querySelectorAll('.details');
	accordions.forEach((accordion) => {
		
		let isAnimating = false; // アニメーション中かどうかを示すフラグ
		
		const title = accordion.querySelector('.summary');
		const content = accordion.querySelector('.details-content');
		
		// タイトルのクリックイベント
		title.addEventListener('click', (e) => {
			e.preventDefault();
			
			// アニメーション中はクリックイベントを受け付けない（連打防止）
			if (isAnimating) return;
			
			// オープン処理
			if (!accordion.open) {
				isAnimating = true; // アニメーション中（オープン時のみでも安定する）
				accordion.open = true; // コンテンツの高さを取得するためopen属性をセット
				
				const contentHeight = content.offsetHeight;
				
				// コンテンツの高さを0に設定して非表示にする
				content.style.maxHeight = 0;
				
				// オフセット時間後にアニメーションを開始
				setTimeout(() => {
					content.style.maxHeight = `${contentHeight}px`; // コンテンツの高さを元の高さに設定して表示する
					accordion.classList.add('is-open'); // オープン状態のクラスを追加
					
					// アニメーション完了後にリセット
					setTimeout(() => {
						content.removeAttribute("style");
						isAnimating = false; // アニメーション解除
					}, ANIMATION_TIME);
				}, OFFSET_TIME);
				
			// クローズ処理	
			} else if (accordion.open) {
				const contentHeight = content.offsetHeight;
				
 				// コンテンツの高さを元の高さに設定して表示する
				content.style.maxHeight = `${contentHeight}px`;
				
				// オフセット時間後にアニメーションを開始
				setTimeout(() => {
					content.style.maxHeight = 0; // コンテンツの高さを0に設定して非表示にする
					accordion.classList.remove('is-open');
					
					// アニメーション完了後にリセット
					setTimeout(() => {
						content.removeAttribute("style");
						accordion.open = false; // open属性を削除
					}, ANIMATION_TIME);
				}, OFFSET_TIME);
			}
		});
		
		// open属性とis-openクラスを同期させるための関数
		function syncOpenState() {
			const hasOpenClass = accordion.classList.contains('is-open');

			if (accordion.open && !hasOpenClass) {
				// open がセット is-open がない時
				accordion.classList.add('is-open');
			} else if (!accordion.open && hasOpenClass) {
				// open が削除 is-open がある時
				accordion.classList.remove('is-open');
			}
		}
		
		// 初期状態でオープン状態を同期する（クラスのつけ忘れ防止）
		syncOpenState();
		
		// ページ内検索で自動開閉した際に同期する
		accordion.addEventListener('toggle', () => {
			
			setTimeout(() => { // クリックした場合にもこのイベントが発生するためクリック時と同様オフセット時間後にオープン状態を同期する
				syncOpenState();
			}, OFFSET_TIME);
		});
	});
});