This was a demo originally by Martin Ivanov, utilizing hidden checkboxes and adjacent sibling combinators to set the “state” of each folder. The live demo has since fallen off of the internet, so I’ll post a copy of it here, with the original code below it.<\/p>\n
See the Pen Nested Folders, No JS<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n This was a demo originally by Martin Ivanov, utilizing hidden checkboxes and adjacent sibling combinators to set the “state” of each folder. The live demo has since fallen off of the internet, so I’ll post a copy of it here, with the original code below it. See the Pen Nested Folders, No JS by Chris […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":13911,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/appearance\/","url_meta":{"origin":14919,"position":0},"title":"appearance","date":"August 31, 2011","format":false,"excerpt":"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme. .thing { -webkit-appearance: value; -moz-appearance: value; appearance: value; } This is starting to be unprefixed, which is great because the cross-browser story here is very complicated. The appearance property is\u2026","rel":"","context":"In \"appearance\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154816,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-file-input-styling-webkitblink\/","url_meta":{"origin":14919,"position":1},"title":"Custom File Input Styling","date":"October 31, 2013","format":false,"excerpt":"If you're interested in Webkit\/Blink\/Chrome specific styling, there is a proprietary pseudo element to hide, and then use an also non-standard psudeo-on-an-input: .custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px\u2026","rel":"","context":"In \"file input\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":195116,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/b\/blank\/","url_meta":{"origin":14919,"position":2},"title":":blank","date":"February 4, 2015","format":false,"excerpt":"The :blank pseudo-class builds upon the :empty pseudo-class. Like :empty, :blank will select elements that contain nothing at all, or contain only an HTML comment. But, :blank will also select elements that include whitespace, which :empty will not. p:blank { display: none; } p:blank will select these paragraphs, just like\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":181092,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/s\/selection\/","url_meta":{"origin":14919,"position":3},"title":"::selection","date":"August 29, 2014","format":false,"excerpt":"Use your cursor select this sentence. Notice how as you select the text a background color fills the space? You can change the background color and color of selected text by styling ::selection. Styling this pseudo element is great for matching user-selected text to your sites color scheme. p::selection {\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-7.46.42-AM.png?fit=1200%2C399&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":198664,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-position\/","url_meta":{"origin":14919,"position":4},"title":"text-underline-position","date":"April 3, 2015","format":false,"excerpt":"The text-underline-position property sets the placement of the underline on links or on text with text-decoration: underline; applied. .element { text-underline-position: under; } Values These are the values specified in the W3C CSS Text Decoration Module Level 3 Candidate Recommendation: auto: the default. The browser will decide between placing the\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198607,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-color\/","url_meta":{"origin":14919,"position":5},"title":"text-decoration-color","date":"April 3, 2015","format":false,"excerpt":"The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links. a { text-decoration-color: #E18728; } Values text-decoration-color can inherit or accept any CSS color value, including named colors, HEX colors, RGBa, and\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14919"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14919"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14919\/revisions"}],"predecessor-version":[{"id":253140,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14919\/revisions\/253140"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14919"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}.css-treeview ul,\r\n.css-treeview li\r\n{\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tlist-style: none;\r\n}\r\n\r\n.css-treeview input\r\n{\r\n\tposition: absolute;\r\n\topacity: 0;\r\n}\r\n\r\n.css-treeview\r\n{\r\n\tfont: normal 11px \"Segoe UI\", Arial, Sans-serif;\r\n\t-moz-user-select: none;\r\n\t-webkit-user-select: none;\r\n\tuser-select: none;\r\n}\r\n\r\n.css-treeview a\r\n{\r\n\tcolor: #00f;\r\n\ttext-decoration: none;\r\n}\r\n\r\n.css-treeview a:hover\r\n{\r\n\ttext-decoration: underline;\r\n}\r\n\r\n.css-treeview input + label + ul\r\n{\r\n\tmargin: 0 0 0 22px;\r\n}\r\n\r\n.css-treeview input + label + ul\r\n{\r\n\tdisplay: none;\r\n}\r\n\r\n.css-treeview label,\r\n.css-treeview label::before\r\n{\r\n\tcursor: pointer;\r\n}\r\n\r\n.css-treeview input:disabled + label\r\n{\r\n\tcursor: default;\r\n\topacity: .6;\r\n}\r\n\r\n.css-treeview input:checked:not(:disabled) + label + ul\r\n{\r\n\tdisplay: block;\r\n}\r\n\r\n.css-treeview label,\r\n.css-treeview label::before\r\n{\r\n\tbackground: url(\"icons.png\") no-repeat;\r\n}\r\n\r\n.css-treeview label,\r\n.css-treeview a,\r\n.css-treeview label::before\r\n{\r\n\tdisplay: inline-block;\r\n\theight: 16px;\r\n\tline-height: 16px;,\r\n\tvertical-align: middle;\r\n}\r\n\r\n.css-treeview label\r\n{\r\n\tbackground-position: 18px 0;\r\n}\r\n\r\n.css-treeview label::before\r\n{\r\n\tcontent: \"\";\r\n\twidth: 16px;\r\n\tmargin: 0 22px 0 0;\r\n\tvertical-align: middle;\r\n\tbackground-position: 0 -32px;\r\n}\r\n\r\n.css-treeview input:checked + label::before\r\n{\r\n\tbackground-position: 0 -16px;\r\n}\r\n\r\n\/* webkit adjacent element selector bugfix *\/\r\n@media screen and (-webkit-min-device-pixel-ratio:0)\r\n{\r\n\t.css-treeview \r\n\t{\r\n\t\t-webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;\r\n\t}\r\n\t\r\n\t@-webkit-keyframes webkit-adjacent-element-selector-bugfix \r\n\t{\r\n\t\tfrom \r\n\t\t{ \r\n\t\t\tpadding: 0;\r\n\t\t} \r\n\t\tto \r\n\t\t{ \r\n\t\t\tpadding: 0;\r\n\t\t}\r\n\t}\r\n}<\/code><\/pre>\n<div class=\"css-treeview\">\r\n\t<ul>\r\n\t\t<li><input type=\"checkbox\" id=\"item-0\" \/><label for=\"item-0\">This Folder is Closed By Default<\/label>\r\n\t\t\t<ul>\r\n\t\t\t\t<li><input type=\"checkbox\" id=\"item-0-0\" \/><label for=\"item-0-0\">Ooops! A Nested Folder<\/label>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li><input type=\"checkbox\" id=\"item-0-0-0\" \/><label for=\"item-0-0-0\">Look Ma - No Hands!<\/label>\r\n\t\t\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t\t\t<li><a href=\".\/\">First Nested Item<\/a><\/li>\r\n\t\t\t\t\t\t\t\t<li><a href=\".\/\">Second Nested Item<\/a><\/li>\r\n\t\t\t\t\t\t\t\t<li><a href=\".\/\">Third Nested Item<\/a><\/li>\r\n\t\t\t\t\t\t\t\t<li><a href=\".\/\">Fourth Nested Item<\/a><\/li>\r\n\t\t\t\t\t\t\t<\/ul>\r\n\t\t\t\t\t\t<\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Item 1<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Item 2<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Item 3<\/a><\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li><input type=\"checkbox\" id=\"item-0-1\" \/><label for=\"item-0-1\">Yet Another One<\/label>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li><input type=\"checkbox\" id=\"item-0-2\" disabled=\"disabled\" \/><label for=\"item-0-2\">Disabled Nested Items<\/label>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/li>\r\n\t\t<li><input type=\"checkbox\" id=\"item-1\" checked=\"checked\" \/><label for=\"item-1\">This One is Open by Default...<\/label>\r\n\t\t\t<ul>\r\n\t\t\t\t<li><input type=\"checkbox\" id=\"item-1-0\" \/><label for=\"item-1-0\">And Contains More Nested Items...<\/label>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Look Ma - No Hands<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Another Item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">And Yet Another<\/a><\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li><a href=\".\/\">Lorem<\/a><\/li>\r\n\t\t\t\t<li><a href=\".\/\">Ipsum<\/a><\/li>\r\n\t\t\t\t<li><a href=\".\/\">Dolor<\/a><\/li>\r\n\t\t\t\t<li><a href=\".\/\">Sit Amet<\/a><\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/li>\r\n\t\t<li><input type=\"checkbox\" id=\"item-2\" \/><label for=\"item-2\">Can You Believe...<\/label>\r\n\t\t\t<ul>\r\n\t\t\t\t<li><input type=\"checkbox\" id=\"item-2-0\" \/><label for=\"item-2-0\">That This Treeview...<\/label>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li><input type=\"checkbox\" id=\"item-2-2-0\" \/><label for=\"item-2-2-0\">Does Not Use Any JavaScript...<\/label>\r\n\t\t\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t\t\t<li><a href=\".\/\">But Relies Only<\/a><\/li>\r\n\t\t\t\t\t\t\t\t<li><a href=\".\/\">On the Power<\/a><\/li>\r\n\t\t\t\t\t\t\t\t<li><a href=\".\/\">Of CSS3<\/a><\/li>\r\n\t\t\t\t\t\t\t<\/ul>\r\n\t\t\t\t\t\t<\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Item 1<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Item 2<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Item 3<\/a><\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li><input type=\"checkbox\" id=\"item-2-1\" \/><label for=\"item-2-1\">This is a Folder With...<\/label>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Some Nested Items...<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Some Nested Items...<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Some Nested Items...<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Some Nested Items...<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">Some Nested Items...<\/a><\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<li><input type=\"checkbox\" id=\"item-2-2\" disabled=\"disabled\" \/><label for=\"item-2-2\">Disabled Nested Items<\/label>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\".\/\">item<\/a><\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/li>\r\n\t<\/ul>\r\n<\/div><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"