Daily Challenge #7 : The 'Recursive' Folder Tree 📂

Source: Dev.to

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">) to manage the open/closed state of every folder.
• Infinite Nesting: The styling must work 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.
• Files and folders should have proper indentation based on their depth.

Pro Tip: Use the adjacent sibling selector input:checked + label + ul to 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: Use different icons (like 📁 and 📂) that swap when the folder is opened.

Extra Credit: Add a “Hover Effect” that highlights the entire row without highlighting the nested children.