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

[PR]