details/summaryで実装するアコーディオン

/* アコーディオン全体のコンテナスタイル */
.accordions {
	--bdc: hsl(210, 16%, 84%);
	border: solid 1px var(--bdc);
	border-radius: 8px;
	overflow: clip;
}

/* 2つ目以降のアコーディオンには上部にボーダーを追加 */
.accordion + .accordion {
	border-top: solid 1px var(--bdc);
}

/* コンテンツエリアのパディング */
.accordion__content {
	padding: 1.25em;
}

/* タイトル部分のスタイル */
.accordion__title {
	display: flex; /* list-item 以外にすることでデフォルトの三角アイコンは非表示になる */
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1em 1.25em;
	cursor: pointer;
	background-color: hsl(210, 8%, 96%);

	/* Tab操作によるフォーカス時のアウトラインを少し内側に寄せる( overflow:clip で見えづらくなることへの対処)  */
	outline-offset: -1px;

	/* Safariで表示されるデフォルトの三角形アイコンを削除 */
	&::-webkit-details-marker {
		display: none;
	}
}

/* タイトルホバー時、背景色を少し濃くする */
@media (any-hover: hover) {
	.accordion__title:hover {
		background-color: hsl(210, 12%, 92%);
	}
}
/* Tabキーでのフォーカス時も同じスタイリング */
.accordion__title:focus-visible {
	background-color: hsl(210, 16%, 92%);
}

/* アイコン擬似要素 */
.accordion__title::after {
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-color: currentColor;

	/*  clip-path で > アイコンを描画し、回転させる  */
	clip-path: polygon(
		calc(35% + 4%) calc(10% - 4%),
		calc(75% + 4% * 2) 50%,
		calc(35% + 4%) calc(90% + 4%),
		calc(35% - 4%) calc(90% - 4%),
		calc(75% - 4% * 2) 50%,
		calc(35% - 4%) calc(10% + 4%)
	);
	rotate: 90deg;
	transition: scale 0.3s;
}

/* アコーディオンが開いている時、アイコンを反転 */
.accordion[open] > .accordion__title::after {
	scale: -1 1;
}

<div class="accordions">
	<details class="accordion">
		<summary class="accordion__title">
			<span>Q: 配送にはどのくらいかかりますか？</span>
		</summary>
		<div class="accordion__content">
			<p>ご注文から通常3〜5営業日でお届けします。お急ぎの場合は、お届け先や在庫状況により最短翌日配送も可能です。</p>
		</div>
	</details>

	<details class="accordion">
		<summary class="accordion__title">
			<span>Q: 返品・交換は可能ですか？</span>
		</summary>
		<div class="accordion__content">
			<p>商品到着後14日以内であれば、未開封・未使用に限り返品・交換を承ります。詳細は返品ポリシーをご確認ください。</p>
		</div>
	</details>

	<details class="accordion">
		<summary class="accordion__title">
			<span>Q: 支払い方法は何が使えますか？</span>
		</summary>
		<div class="accordion__content">
			<p>クレジットカード、銀行振込、コンビニ決済、各種電子マネー、代金引換がご利用いただけます。</p>
		</div>
	</details>
</div>

/* ----- details ----- */

.accordions {
	--bdc: hsl(210, 16%, 84%);
	--duration: 0.3s;
	border-block: solid 1px var(--bdc);
}

.accordion {
	/* icon 変化用の変数 */
	--icon-rotate: 0deg;

	&[open] {
		--icon-rotate: 90deg;
	}

	& + & {
		border-top: 1px solid var(--bdc);
	}

	/* 
		::details-content をサポートしているブラウザでは開閉アニメーションをつける ( 非サポートブラウザでは無視される )
	*/
	&::details-content {
		display: grid;
		transition-duration: var(--duration);
		transition-property: content-visibility, grid-template;
		transition-behavior: allow-discrete;

		/* 閉じてる状態 */
		grid-template-rows: 0fr;
	}

	&[open]::details-content {
		/* 開いている時 */
		grid-template-rows: 1fr;
	}
}

.accordion__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	cursor: pointer;
	padding: 1em 0.5em;

	/* Safariで表示されるデフォルトの三角形アイコンを削除 */
	&::-webkit-details-marker {
		display: none;
	}
}

/* タイトルホバー時、背景色を少し濃くする */
@media (any-hover: hover) {
	.accordion:has(> .accordion__title:hover) {
		background-color: color-mix(in srgb, var(--bdc), transparent 60%);
	}
}
/* Tabキーでのフォーカス時も同じスタイリング */
.accordion:has(> .accordion__title:focus-visible) {
	background-color: color-mix(in srgb, var(--bdc), transparent 60%);
}

/* アイコン */
.accordion__icon {
	display: grid;
	width: 1em;
	height: 1em;
	place-items: center;

	&::before,
	&::after {
		content: '';
		display: block;
		grid-area: 1 / 1;
		background-color: currentColor;
	}
	&::before {
		width: 0.125em;
		height: 100%;
		transition: rotate var(--duration);
		rotate: var(--icon-rotate);
	}
	&::after {
		height: 0.125em;
		width: 100%;
	}
}

.accordion__content {
	padding-inline: 0.5em;
	overflow: hidden;
	transition: padding-block var(--duration);
	transition-duration: var(--duration);

	[open] > & {
		padding-bottom: 1em;
	}
}

<div class="accordions">
	<details class="accordion" name="demo">
		<summary class="accordion__title">
			<span>Q: 配送にはどのくらいかかりますか？</span>
			<span class="accordion__icon" aria-hidden="true"></span>
		</summary>
		<div class="accordion__content">
			<p>ご注文から通常3〜5営業日でお届けします。お届け先の地域や在庫状況によって、お届けまでの日数が前後する場合がございます。</p>
			<p>お急ぎの場合は、翌日配送オプションもご利用いただけます（一部地域・商品を除く）。</p>
		</div>
	</details>

	<details class="accordion" name="demo">
		<summary class="accordion__title">
			<span>Q: 返品・交換は可能ですか？</span>
			<span class="accordion__icon" aria-hidden="true"></span>
		</summary>
		<div class="accordion__content">
			<p>商品到着後14日以内であれば、未開封・未使用に限り返品・交換を承ります。返品をご希望の場合は、カスタマーサポートまでご連絡ください。</p>
		</div>
	</details>

	<details class="accordion" name="demo">
		<summary class="accordion__title">
			<span>Q: 支払い方法は何が使えますか？</span>
			<span class="accordion__icon" aria-hidden="true"></span>
		</summary>
		<div class="accordion__content">
			<p>クレジットカード（VISA、Mastercard、JCB、American Express）、銀行振込、コンビニ決済、各種電子マネーがご利用いただけます。</p>
			<p>また、10,000円以上のご注文で分割払いもお選びいただけます。ご利用の際は決済画面で支払い回数をご指定ください。</p>
		</div>
	</details>
</div>

.accordions {
	--duration: 0.3s;
	--bdc: hsl(210, 16%, 84%);
	border-block: solid 1px var(--bdc);
}

.accordion {
	& + & {
		border-top: 1px solid var(--bdc);
	}
}

.accordion__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	cursor: pointer;
	padding: 1em 0.5em;

	/* Safariで表示されるデフォルトの三角形アイコンを削除 */
	&::-webkit-details-marker {
		display: none;
	}

	/* アイコン擬似要素 */
	&::after {
		content: '';
		display: block;
		width: 1em;
		height: 1em;
		background-color: currentColor;

		/*  clip-path で > アイコンを描画し、回転させる  */
		clip-path: polygon(
			calc(35% + 4%) calc(10% - 4%),
			calc(75% + 4% * 2) 50%,
			calc(35% + 4%) calc(90% + 4%),
			calc(35% - 4%) calc(90% - 4%),
			calc(75% - 4% * 2) 50%,
			calc(35% - 4%) calc(10% + 4%)
		);
		rotate: 90deg;
		transition: scale 0.3s;
	}

	/* アコーディオンが開いている時、アイコンを反転 */
	[data-opened] > &::after {
		scale: -1 1;
	}
}

/* タイトルホバー時、背景色を少し濃くする */
@media (any-hover: hover) {
	.accordion:has(> .accordion__title:hover) {
		background-color: color-mix(in srgb, var(--bdc), transparent 60%);
	}
}
/* Tabキーでのフォーカス時も同じスタイリング */
.accordion:has(> .accordion__title:focus-visible) {
	background-color: color-mix(in srgb, var(--bdc), transparent 60%);
}

.accordion__body {
	display: grid;
	transition-property: padding-block, grid-template;
	transition-duration: var(--duration);

	/* 閉じてる状態 */
	grid-template-rows: 0fr;
	padding-block: 0;
	padding-inline: 0.5em;
}

/* ※ grid アニメーションに 必須 */
.accordion__content {
	overflow: hidden;
}

/* 開いている時 */
[data-opened] > .accordion__body {
	grid-template-rows: 1fr;
	padding-bottom: 1em;
}

<div class="accordions" data-multiple="disallow">
	<details class="accordion">
		<summary class="accordion__title">
			<span>Q: 配送にはどのくらいかかりますか？</span>
		</summary>
		<div class="accordion__body">
			<div class="accordion__content">
				<p>ご注文から通常3〜5営業日でお届けします。お届け先の地域や在庫状況によって、お届けまでの日数が前後する場合がございます。</p>
				<p>お急ぎの場合は、翌日配送オプションもご利用いただけます（一部地域・商品を除く）。</p>
			</div>
		</div>
	</details>

	<details class="accordion">
		<summary class="accordion__title">
			<span>Q: 返品・交換は可能ですか？</span>
		</summary>
		<div class="accordion__body">
			<div class="accordion__content">
				<p>
					商品到着後14日以内であれば、未開封・未使用に限り返品・交換を承ります。返品をご希望の場合は、カスタマーサポートまでご連絡ください。
				</p>
			</div>
		</div>
	</details>

	<details class="accordion">
		<summary class="accordion__title">
			<span>Q: 支払い方法は何が使えますか？</span>
		</summary>
		<div class="accordion__body">
			<div class="accordion__content">
				<p>クレジットカード（VISA、Mastercard、JCB、American Express）、銀行振込、コンビニ決済、各種電子マネーがご利用いただけます。</p>
				<p>また、10,000円以上のご注文で分割払いもお選びいただけます。ご利用の際は決済画面で支払い回数をご指定ください。</p>
			</div>
		</div>
	</details>
</div>

// アニメーションが完了するのを待つ
const waitAnimation = (element) => {
	// アニメーションを取得 （子要素がアニメーションするので subtreeをtrueにセットする）
	const animations = element.getAnimations({ subtree: true });

	// allSettled を使うことで、キャンセル時も reject せずに完了する
	return Promise.allSettled(animations.map((a) => a.finished));
};

const open = async (details) => {
	// すでに開いている場合は何もしない
	if (details.open && details.hasAttribute('data-opened')) return;

	// open属性をセット
	details.open = true;

	// 次フレームで data-opened 属性を付与（CSS側でフェードインアニメーション開始）
	requestAnimationFrame(() => {
		details.setAttribute('data-opened', ''); // 属性の追加
	});
};

const close = async (details) => {
	// すでに閉じている場合は何もしない
	if (!details.open && !details.hasAttribute('data-opened')) return;

	details.removeAttribute('data-opened'); // 属性を削除

	// アニメーションを待つ
	await waitAnimation(details);

	// アニメーション完了後にopen属性 を除去。
	details.open = false;
};

const setEvent = (details) => {
	// summary 要素をトリガーとする
	const trigger = details.querySelector('summary');
	if (!trigger) return;

	// 親要素を取得
	const parent = details.parentNode;

	// 複数展開を許可するかどうかを、親要素の [data-multiple] でチェックする。（name属性での開閉はアニメーションが効かない）
	let allowMultiple = false;
	if (null != parent) {
		allowMultiple = 'disallow' !== parent.getAttribute('data-multiple');
	}

	// summary の 'click' イベント
	trigger.addEventListener('click', onClick);
	function onClick(e) {
		// すぐに open 属性が切り替わらないようにする
		e.preventDefault();

		// 開く処理
		if (!details.open) {
			// （複数展開が禁止されている場合）他の開いているアイテムがあるかどうかを先に探して閉じる
			if (!allowMultiple) {
				const openedItem = parent.querySelector(`[data-opened]`);
				requestAnimationFrame(() => {
					// 1フレーム待機（safariでは requestAnimationFrame() がないと動かなかった）
					if (null != openedItem) close(openedItem);
				});
			}

			open(details);
		}

		// 閉じる処理
		else if (details.open) {
			close(details);
		}
	}

	// ページ内検索時にopenだけ付与されてしまうので、'toggle'イベントで属性操作する
	//   toggleイベントはclick時やname属性による開閉処理でも発火することに注意。また、e.preventDefault() は効かない。)
	details.addEventListener('toggle', onToggle);
	function onToggle(e) {
		const hasOpen = details.open;
		const hasDataOpen = details.hasAttribute('data-opened');

		// open はセットされたのに data-opened 属性がついてない時
		if (hasOpen && !hasDataOpen) {
			details.setAttribute('data-opened', '');
		}
		// open は削除されたのに data-opened 属性がまだついている時
		if (!hasOpen && hasDataOpen) {
			details.removeAttribute('data-opened');
		}
	}
};

/**
 * 処理の実行
 */
(function () {
	const detailsAll = document.querySelectorAll('.accordion');
	detailsAll.forEach((details) => {
		setEvent(details);
	});
})();

.accordions {
}

/* border を使うとjsでタイトルの高さ取得した時に少し数値がずれてバウンドすることに注意 */
.accordion {
	overflow: hidden;

	+ .accordion {
		margin-top: 1px;
	}
}

/* display:list-item 以外にしてデフォルトの三角アイコンを非表示にする */
.accordion__title {
	--bgc: #101010;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em;
	background: var(--bgc);
	color: #fff;
	cursor: pointer;

	/* Safariで表示されるデフォルトの三角形アイコンを削除 */
	&::-webkit-details-marker {
		display: none;
	}

	/* アイコン擬似要素 */
	&::after {
		content: '';
		display: block;
		width: 1em;
		height: 1em;
		background-color: currentColor;

		/*  clip-path で > アイコンを描画し、回転させる  */
		clip-path: polygon(
			calc(35% + 4%) calc(10% - 4%),
			calc(75% + 4% * 2) 50%,
			calc(35% + 4%) calc(90% + 4%),
			calc(35% - 4%) calc(90% - 4%),
			calc(75% - 4% * 2) 50%,
			calc(35% - 4%) calc(10% + 4%)
		);
		rotate: 90deg;
		transition: rotate 0.3s;
	}
	.is-opened > &::after {
		rotate: -90deg;
	}
}
/* タイトルホバー時、背景色を少し半透明にする */
@media (any-hover: hover) {
	.accordion__title:hover {
		background-color: color-mix(in srgb, var(--bgc), transparent 15%);
	}
}
/* Tabキーでのフォーカス時も同じスタイリング */
.accordion__title:focus-visible {
	background-color: color-mix(in srgb, var(--bgc), transparent 15%);
}

.accordion__content {
	padding: 1.25em;
	background-color: #f2f2f2;
}

<div class="accordions" data-multiple="disallow">
	<details class="accordion">
		<summary class="accordion__title">
			<span>Q: 配送にはどのくらいかかりますか？</span>
		</summary>
		<div class="accordion__content">
			<p>ご注文から通常3〜5営業日でお届けします。お届け先の地域や在庫状況によって、お届けまでの日数が前後する場合がございます。</p>
			<p>お急ぎの場合は、翌日配送オプションもご利用いただけます（一部地域・商品を除く）。</p>
		</div>
	</details>
	<details class="accordion">
		<summary class="accordion__title">
			<span>Q: 返品・交換は可能ですか？</span>
		</summary>
		<div class="accordion__content">
			<p>商品到着後14日以内であれば、未開封・未使用に限り返品・交換を承ります。返品をご希望の場合は、カスタマーサポートまでご連絡ください。</p>
		</div>
	</details>
	<details class="accordion">
		<summary class="accordion__title">
			<span>Q: 支払い方法は何が使えますか？</span>
		</summary>
		<div class="accordion__content">
			<p>クレジットカード（VISA、Mastercard、JCB、American Express）、銀行振込、コンビニ決済、各種電子マネーがご利用いただけます。</p>
			<p>また、10,000円以上のご注文で分割払いもお選びいただけます。ご利用の際は決済画面で支払い回数をご指定ください。</p>
		</div>
	</details>
</div>

(function () {
	const ANIMATION_TIMES = {
		duration: 250,
		easing: 'ease-out',
	};

	const accordions = document.querySelectorAll('.accordion');
	accordions.forEach((accordion) => {
		// アニメーションを保持しておくための変数
		let animation = null;

		// 現在のアニメーション状況を保持する変数
		let nowAnimation = '';

		// 親要素を取得
		const parent = accordion.parentNode;

		// 複数展開を許可するかどうかを、親要素の [data-multiple] でチェックする
		let allowMultiple = false;
		if (null != parent) {
			allowMultiple = 'disallow' !== parent.getAttribute('data-multiple');
		}

		// アニメーションリセット時の処理
		const resetAnimation = () => {
			animation = null;
			nowAnimation = '';
			accordion.style.height = '';
		};

		// __title 取得
		const title = accordion.querySelector('.accordion__title');

		// __title の高さを取得
		const titleHeight = title.offsetHeight;

		// __content 取得
		const content = accordion.querySelector('.accordion__content');

		title.addEventListener('click', (e) => {
			// すぐに open 属性が切り替わらないようにする
			e.preventDefault();

			// .accordion 全体の高さを取得（アニメーション中であればその高さを取得したいので、キャンセル前に取得）
			const accordionHeight = accordion.offsetHeight;

			// アニメーション中であればキャンセルさせる
			if (animation) {
				animation.cancel();
			}

			// オープン / クローズ 処理
			if (nowAnimation === 'closing' || !accordion.open) {
				// open属性を最初にセット
				accordion.open = true;

				// 現在の高さで一旦固定させる
				accordion.style.height = `${accordionHeight}px`;

				// コンテンツの高さを取得。（openを付けたあとで取得しないと iOSで０になる）
				const contentHeight = content.offsetHeight;

				// アニメーションの状況をセット
				nowAnimation = 'opening';

				// 現在の高さから __title + コンテンツ の高さまで広げる
				animation = accordion.animate(
					{
						height: `${titleHeight + contentHeight}px`,
					},
					ANIMATION_TIMES
				);

				// アニメーション完了時の処理を登録
				animation.onfinish = () => {
					accordion.open = true;
					resetAnimation();
				};

				// アイコンのアニメーション用クラスの切り替え(これもタイミングに気をつけないと動かないときがある)
				accordion.classList.add('is-opened');
			} else if (nowAnimation === 'opening' || accordion.open) {
				// （複数展開が禁止されている場合）他の開いているアイテムがあるかどうかを先に探して閉じる
				if (!allowMultiple && parent) {
					const openedItem = parent.querySelector('.is-opened');
					if (openedItem && openedItem !== accordion) {
						const summary = openedItem.querySelector('.accordion__title');
						if (summary) summary.click();
					}
				}

				// 現在の高さで一旦固定させる
				accordion.style.height = `${accordionHeight}px`;

				// アニメーションの状況をセット
				nowAnimation = 'closing';

				// 現在の高さから __title の高さまで縮める
				animation = accordion.animate(
					{
						height: `${titleHeight}px`,
					},
					ANIMATION_TIMES
				);

				// アニメーション完了時の処理を登録
				animation.onfinish = () => {
					accordion.open = false;
					resetAnimation();
				};

				// アイコンのアニメーション用クラスを削除
				accordion.classList.remove('is-opened');
			}
		});
	});
})();