It is February 19th. Today, we are stepping away from UI fluff and diving into structural architecture. Your mission is to build a nested file explorer.
The Mission
Create a directory tree (folders inside folders) that can be toggled open and closed. It needs to look and feel like a real code editor’s sidebar.
The Rules 🚫
- NO JavaScript Allowed : No toggling “active” classes or handling click events with scripts.
-
Pure CSS/HTML only : Use the “Checkbox Hack” (
<input type="checkbox">+<label>) to manage the open/closed state of every folder. - Infinite Nesting : The styling must be written in a way that it works whether a folder is 1 level deep or 10 levels deep.
The Goal 🏆
Clicking a folder name should expand it to reveal the files inside. Clicking it again should collapse it. The files and folders should have proper indentation based on their depth.
Pro Tip : Use the adjacent sibling selector
input:checked + label + ulto show the nested list only when the hidden checkbox is active!
How to enter
Drop your CodePen or GitHub Repo in the comments!
- Bonus Points : If you use different icons (like 📁 and 📂) that swap when the folder is opened.
- Extra Credit : If you add a “Hover Effect” that highlights the entire row without highlighting the nested children.
Have fun!