In my article about How to setup a Multi Page Application in AngularJS, I wanted to show a directory structure. I thought I would wrap it into a PRE element, to easily glance at the containment hierarchy. I started by jotting down only folders and files that I needed to talk about, hoping to simplify my readers task to go through them. But soon I realized that that structure was exactly what I was trying to describe in the first place and it didn’t make much sense to intentionally leave out other meaningful folders and files, just because it would be a pain to read. So I understood I had to find a way to make folders toggle on click. That would allow me to show only a portion by default, and allow the reader to freely move around in the hierarchy.
I looked in the Internet for a ready made solution with these features:
- Input: indented text.
- Output: collapsible list.
- Option to open some folders by default.
- Easily injectable into a WordPress post.
I couldn’t find anything that suited my needs, so I embarked into building something myself.
First I found an ingenuous article about making a Pure CSS collapsible tree menu. But if a way to expand collapse unordered lists is just a couple of lines in jQuery, and I still needed some code for converting the indented text to an HTML list, better to stay in the JS realm for all the solution and not mess with CSS. However, I really enjoyed how that guy took advantage of checkboxes to keep track of the collapsing state of folders.
After a couple of days, I shared my Indentation to Toggling List project on GitHub.
https://github.com/aercolino/indentation-to-toggling-list#indentation-to-toggling-list