Click here to Skip to main content
15,076,010 members
Articles / Programming Languages / Javascript
Posted 21 Nov 2007


34 bookmarked

Tiny JavaScript tree

Rate me:
Please Sign up or sign in to vote.
4.69/5 (10 votes)
21 Nov 2007CPOL2 min read
A tiny Javascript tree.

Screenshot - tree.gif


The whole thing started with my exploring the AJAX and DHTML technologies. I guess a comparison of different toolkits available out there is a topic for a completely different article. Suffice to say that I was surprised by how little I new and how big of the world there is outside of the AJAX.NET. One problem, however, I encountered is how huge those JavaScript libraries are: most of the ones that do anything are in excess of 30,000 lines. That naturally brings up a maintenance question: if something goes bad, what do I do?

So, one of the first things I wanted to give a try was a tree control. It would seem to be simple. After all, HTML comes out of the box with UL/LI elements. So there would be very little I would need to do on top of the basic UL/LI HTML code:

  • I would need to draw the node lines
  • I would need to handle expand/collapse events
  • I would need to show the selection

If I follow the outlined path, I should have very little JavaScript programming and virtually no conventions - just do the UL/LI combination.

<ul id="t">
            <li><a onclick="alert('look mom, I\'m here!');">Item2.2</a>

    new Tree("t");

Unfortunately, at the end, I ended up with a little more code than I anticipated, but the whole thing is still under 150 lines of HTML/CSS/JavaScript code - for all of us who have to stick around after the fun part of the initial development is over and the maintenance nightmare begins - sure a selling point.

Draw the node lines

I can't claim responsibility for most of this. Here is a link to the original article that got me started: The author explains in detail, step-by-step, on how to draw tree lines.

Internal design decisions

I decided to define a parent child relationship in the HTML code using the UL/LI combination. Internally, JavaScript respects this; however, some minor reformatting is done. The following things are prettied-up:

  • An image icon is added as a first element for every LI.
  • A new SPAN element is created and all the LI contents (except for any embedded sub-trees) are pushed down under this SPAN element.

So after this reformatting, every LI should have an IMG that handles expand/collapse, a SPAN with leaf contents that handles selection, and an optional UL sub-tree. All this structure is initialized in the tree constructor, but the initChildren function is provided if the tree/sub-tree contents are changed.


I decided not to do true inheritance. This would either fetch too much code or create dependency on the third-party library (that would fetch too much code). Instead, I did my customization through the JSON object you can pass to the constructor. Here is an example on how to change icons:

new Tree("t", { 
        icons : ["list.gif", "list.gif", "list.gif"]

If your project is using some OO JavaScript library, it would make sense to add inheritance and customize the default behaviors (expand, collapse, icon selection) in the derived class.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
Writing code since 1987 using whatever language/environment you can imagine. Recently got into the mobile games. Feel free to check them out at

Comments and Discussions

QuestionDoesn't work in IE6?? Pin
Member 406514219-Feb-08 4:09
MemberMember 406514219-Feb-08 4:09 
AnswerRe: Doesn't work in IE6?? Pin
divrozhkov22-Jul-08 7:27
Memberdivrozhkov22-Jul-08 7:27 
GeneralOpen all , Close all &gt; Pin
Michael Vasquez22-Jan-08 21:13
MemberMichael Vasquez22-Jan-08 21:13 
How would you implement these two functions so upon loading it is close all? Nice code.
GeneralTry this one Pin
Forbes F X pu5-Jan-08 21:51
MemberForbes F X pu5-Jan-08 21:51 
GeneralNice & Small Pin
miies21-Nov-07 21:10
Membermiies21-Nov-07 21:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.