How to convert indented text to a collapsible list

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:

  1. Input: indented text.
  2. Output: collapsible list.
  3. Option to open some folders by default.
  4. 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.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.