detailsとsummaryでコンテンツ開閉

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

HTMLのdetailsタグとsummaryタグ、見た目はCSSのみで動きのあるコンテンツ開閉が実現できます。
他のページに有るちょっとしたコンテンツを、ページ内に表示したい、それも開閉できるブロックとしての設置です。ここではこのブロックをセグメント(Lotus Notesを長らくつかっていますので、この呼び方がスッキリする。)と呼ぶことにします。
ここにメモしているのは閲覧者から見ると、同一ページに見えますが、実態は外部ページの例です。
また閉じている状態は、非表示にしている訳ではありませんので、SEO対策として隠しコンテンツスパム扱いを受けない筈です。

【ここをクリックでJavaScriptで開閉できる、例えば開閉をhistoryと連動させたい時など】

外部ページをiframeで埋め込んでいます

details と summayで実際の例

上記事例のコード

サンプル

HTML

<details data-id="seg01" class="segDetails">
	<summary id="seg01" class="segSummary"> 外部ページをiframeで埋め込んでいます</summary>
	<div class="details-content">
		<iframe id="frame_seg01" name="frame_seg01" src="../rootcolor/index.html" style="padding-top: 2.0rem;width: 100%;" scrolling="no" frameborder="0">
		</iframe>
	</dev>
</details>

CSS

details[open] .details-content {
	animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
details summary {
	cursor: pointer;
	list-style: none;
}
details summary::-webkit-details-marker {
	display: none;
}
details summary:hover {
	background-color: var(--link-hover-background-color);
	color: var(--link-hover-text-color);
}

.segDetails {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 3px;
}
.segDetails[open] {
	border: solid 1px var(--basic-background-color);
	border-radius: 5px 5px 0 0 / 5px 5px 0 0;
}

.segSummary {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.5rem;
	font-size: 1.0rem;
	font-weight: bold;
	color: var(--active-text-color);
	border: solid 1px var(--active-background-color);
	box-shadow: 5px 5px 5px rgba(var(--basic-shadow-rgba));
	border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px;
}
.segSummary::before {
	content: "▶ ";
	color: cyan;
	width: 1.0rem;
	font-size: 1.0rem;
	font-weight: bold;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}
.segDetails[open] > .segSummary {
	color: var(--outline-text-color);
	background-color: var(--active-background-color);
	border-radius: 5px 5px 0 0 / 5px 5px 0 0;
	box-shadow: none; 
}
	.segDetails[open] > .segSummary::before {
		content: "▼ ";
		color: cyan;
		width: 1.0rem;
		font-size: 1.0rem;
		font-weight: bold;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}
	.segDetails[open] > .segSummary:hover {
		background-color: var(--link-hover-background-color);
		color: var(--link-hover-text-color);
	}

参考文献:https://code-kitchen.dev/html/details-summary/