Creating Tree View Using jQuery

Introduction

In this article we will learn how to create a tree view in jQuery. A Tree view is used to represent a hierarchy. You can use it for many purposes. So let's create it.

Basics - Understanding Tree View

To create a tree view we will use the following two methods.

Click()

It is used for binding to the click event handler of an element. Whenever the user clicks on an element it will be detected using the click handler. The syntax for the click event is:

jQueryObject.click(handler_function);

Toggle()

It is a jQuery UI method for toggling the display property of an element with the animation effect as well. For our purposes we will use a toggle with a fold effect. The syntax for a toggle is:

jQueryObject.toggle("fold","effect_duration");

In HTML we will use the following tags.

UL - Unordered List

It declares an unordered list.

<ul> List items </ul>

LI - List Item

It declares list items.

<li> Item name </li>

Logic behind the JavaScript Tree View

1. First we need to prepare the HTML.
2. In the tree view we have Parent Nodes, Child Nodes, Nodes.
3. To create nodes we will use the LI and UL tags of HTML.
4. To represent the parent node we will use a LI tag just above the UL.
5. To represent the child node we use the UL tag just below the LI Tag.

Coding the Tree View

It's time to turn our Dreamed Tree View into reality.

To create tree view items, add the following HTML snippet in your HTML File.

<ul>
    <li id="m1">Main 1</li>
    <div id="l1cover">
        <ul>
            <li>1</li>
            <li id="inLst">2</li>
            <div id="inCt1">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            <li>3</li>
        </ul>
    </div>
</ul>
<ul>
    <li id="m2">Main 2</li>
    <div id="l2cover">
        <ul>
            <li id="inLst2">1</li>
            <div id="inCt2">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</ul>

Now to make your tree view work, just add the following jQuery snippet:

$("#m1").click(function () {
    $("#l1cover").toggle("fold", 1000);
    });
    $("#m2").click(function () {
        $("#l2cover").toggle("fold", 1000);
    });
    $("#inLst").click(function () {
        $("#inCt1").toggle("fold", 1000);
    });
    $("#inLst2").click(function () {
        $("#inCt2").toggle("fold", 1000);
});


Summary

To summarize, we just learned how to create the tree view in jQuery. Here the important point is not about creating the tree view but how to use the power of jQuery intelligently. You can check my other articles about jQuery for more details of how to use it.

Thanks for reading and don't forget to comment and like this article.

Output

Live Demo

Full Tree View


Minimized 1st sub node


Minimized 2nd child node


Minimized child nodes


Minimized 2nd node


Minimized 1st node


All nodes minimized