HTML-5 Tree Code Generator

Dashed list to tree, made from HTML-5 <details> elements. Useful for quickly generating a collapsible table of contents.

On left side you see a dashed list that represents a tree structure. The dashes ('-') need to be at line start, but can be indented by spaces. One dash means root level, branching to second level means two dashes, and so on. Clicking onto "Generate" will fill the text-area to the right with HTML-5 code, representing the tree according to the dashed list, and it will render the tree as HTML in the panel right of the code (layout may differ when viewing this page on a mobile). You then can modify the generated HTML code and view your changes by clicking "Display". Anyway clicking "Generate" will always overwrite the HTML code in middle area.

Use Ctrl-U or menu "Page Source" to see the JavaScript code behind this conversion. This page has been published on my Blog.