Home/ Questions/Q 6935173
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T12:04:04+00:00

UL/OLs are can be easily styled/displayed for their natural flow i.e.: Root Level 1

  • 0

UL/OLs are can be easily styled/displayed for their natural flow i.e.:

  • Root
    • Level 1 Item 1
    • Level 1 Item 2
      • Level 1.1 Item 1
      • Level 1.1 Item 2
        • Level 1.1.1 Item 1
    • Level 1 Item 3

And so on…

…now we have a peculiar requirement to show this like a tree (like how one visualizied binary search trees) with the root at the top and the children nodes below it and so on all the way up to the leaf.

It’s argued that that’s a better way of presentation of the content (each li is max 50 characters long). It’s kinda more intuitive to see a top-down decomposition like tree structure with the root at the top.

So the question is this: What’ the most effective way to show the above list content as a top-down tree (instead of left-to-right as per the natural layout).

We can’t (and don’t want) to use images. The users enter the data in a form like box and it shows up at the point of insertion (think of facebook comment-like feature for nested lists). Is there any way to ‘transform’ this using CSS, Javascript/Jquery into a tree like view?? (or create it ‘as we move along’?). There cannot be a limit to the depth, but sideways scrolling is acceptable.

In the natural layout (L-R) we can achieve the visual cue of children through indentation, color-coding and creative use of the border-visibility. I’m at my wits’ end for even being able to display this visually like a tree with just HTML/CSS + javascript constructs. No experience in doing this.

Any ideas/directions/pointers to articles/plug-ins to use/Off the shelf solutions etc., would be greatly appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m pretty sure this is what you’re looking for:

    http://thejit.org/demos/

    Try the SpaceTree in the middle, right. Note the custom style animations available, and the possibility to rearrange on demand the graph. Overall, that is a really cool project. :)

    To use it with your list, you would need to hide the list and then create a native JS object (note, it’s not a JSON object regardless of what the variable is called in the code behind) and populate it as you iterate over the UL and children. But it’s very doable.

    • 0