Dossiers imbriqués et extensibles - Astuces CSS

Il s'agissait d'une démo à l'origine de Martin Ivanov, utilisant des cases à cocher cachées et des combinateurs frères adjacents pour définir «l'état» de chaque dossier. La démo en direct est depuis tombée sur Internet, je vais donc en publier une copie ici, avec le code original en dessous.

Voir les dossiers imbriqués Pen, No JS par Chris Coyier (@chriscoyier) sur CodePen.

.css-treeview ul, .css-treeview li ( padding: 0; margin: 0; list-style: none; ) .css-treeview input ( position: absolute; opacity: 0; ) .css-treeview ( font: normal 11px "Segoe UI", Arial, Sans-serif; -moz-user-select: none; -webkit-user-select: none; user-select: none; ) .css-treeview a ( color: #00f; text-decoration: none; ) .css-treeview a:hover ( text-decoration: underline; ) .css-treeview input + label + ul ( margin: 0 0 0 22px; ) .css-treeview input + label + ul ( display: none; ) .css-treeview label, .css-treeview label::before ( cursor: pointer; ) .css-treeview input:disabled + label ( cursor: default; opacity: .6; ) .css-treeview input:checked:not(:disabled) + label + ul ( display: block; ) .css-treeview label, .css-treeview label::before ( background: url("icons.png.webp") no-repeat; ) .css-treeview label, .css-treeview a, .css-treeview label::before ( display: inline-block; height: 16px; line-height: 16px;, vertical-align: middle; ) .css-treeview label ( background-position: 18px 0; ) .css-treeview label::before ( content: ""; width: 16px; margin: 0 22px 0 0; vertical-align: middle; background-position: 0 -32px; ) .css-treeview input:checked + label::before ( background-position: 0 -16px; ) /* webkit adjacent element selector bugfix */ @media screen and (-webkit-min-device-pixel-ratio:0) ( .css-treeview ( -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s; ) @-webkit-keyframes webkit-adjacent-element-selector-bugfix ( from ( padding: 0; ) to ( padding: 0; ) ) )

This Folder is Closed By Default

Ooops! A Nested Folder

Look Ma - No Hands!

First Nested Item
Second Nested Item
Third Nested Item
Fourth Nested Item


Item 1
Item 2
Item 3


Yet Another One

item
item
item
item
item
item
item
item


Disabled Nested Items

item
item
item
item
item
item
item
item


item
item
item
item


This One is Open by Default…

And Contains More Nested Items…

Look Ma - No Hands
Another Item
And Yet Another


Lorem
Ipsum
Dolor
Sit Amet


Can You Believe…

That This Treeview…

Does Not Use Any JavaScript…

But Relies Only
On the Power
Of CSS3


Item 1
Item 2
Item 3


This is a Folder With…

Some Nested Items…
Some Nested Items…
Some Nested Items…
Some Nested Items…
Some Nested Items…


Disabled Nested Items

item
item
item
item
item
item
item
item