The answer
Use a Set to track expanded folder paths. Add to the Set on expand, delete on collapse. On re-render, check if a path is in the Set and set the display accordingly. Optionally save to localStorage.
File Explorer Expand/Collapse Implementation
How do you persist expanded state in a file explorer?
More FAQs in File Explorer Expand/Collapse Implementation
Add a click handler to folder elements. Toggle the children container's display between 'none' and 'block'. Update the folder icon. Use e.stopPropagation() to prevent parent folders from toggling when a child is clicked.
Select all children containers and set their display: expandAll sets all to 'block', collapseAll sets all to 'none'. Also update all folder icons accordingly.
Add tabindex='0' to folder elements. Handle keydown: Enter/Space to toggle, ArrowRight to expand, ArrowLeft to collapse, ArrowUp/Down to navigate between nodes. This makes the file explorer accessible.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.