Carpetas anidadas y expandibles - Trucos CSS

Esta fue una demostración originalmente de Martin Ivanov, que utilizaba casillas de verificación ocultas y combinadores hermanos adyacentes para establecer el "estado" de cada carpeta. Desde entonces, la demostración en vivo ha desaparecido de Internet, por lo que publicaré una copia aquí, con el código original debajo.

Consulte las carpetas anidadas de lápiz, sin JS de Chris Coyier (@chriscoyier) en 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