CSSだけで開閉するツリー

Result

以前「CSSでフォルダツリーを作る」を書きましたが今回は開閉するタイプです。

お察しの通りですがdetailsタグで実装されています。

css

.tree {
	--spacing: 1.5rem;
	--radius: 10px;
}

.tree li {
	display: block;
	position: relative;
	padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul {
	margin-left: calc(var(--radius) - var(--spacing));
	padding-left: 0;
}

.tree ul li {
	border-left: 2px solid #ddd;
}

.tree ul li:last-child {
	border-color: transparent;
}

.tree ul li::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(var(--spacing) / -2);
	left: -2px;
	width: calc(var(--spacing) + 2px);
	height: calc(var(--spacing) + 1px);
	border: solid #ddd;
	border-width: 0 0 2px 2px;
}

.tree summary {
	display: block;
	cursor: pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker {
	display: none;
}

.tree summary:focus {
	outline: none;
}

.tree summary:focus-visible {
	outline: 1px dotted #000;
}

.tree li::after,
.tree summary::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(var(--spacing) / 2 - var(--radius));
	left: calc(var(--spacing) - var(--radius) - 1px);
	width: calc(2 * var(--radius));
	height: calc(2 * var(--radius));
	border-radius: 50%;
	background: #ddd;
}

.tree summary::before {
	content: "+";
	z-index: 1;
	background: #696;
	color: #fff;
	line-height: calc(2 * var(--radius) - 2px);
	text-align: center;
}

.tree details[open] > summary::before {
	content: "−";
}

調整が必要ですがネストが深くなっても動作しました。

html

<ul class="tree">
	<li>
		<details open>
			<summary>Giant planets</summary>
			<ul>
				<li>
					<details>
						<summary>Gas giants</summary>
						<ul>
							<li>Jupiter</li>
							<li>Saturn</li>
						</ul>
					</details>
				</li>
				<li>
					<details>
						<summary>Ice giants</summary>
						<ul>
							<li>Uranus</li>
							<li>Neptune</li>
						</ul>
					</details>
				</li>
			</ul>
		</details>
	</li>
</ul>

classは親のみ。

via

詳しい解説は以下をご参照下さい。
Tree views in css