Code With Logic

Creating Code For Simplicity but Logic For Need

Creating tree view in jQuery


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

Basics – Understanding Tree View

For creating tree view we will use following two methods:


It is used for binding click event handler on an element. Whenever user click on any element it will be detected by using click handler. Syntax for click is;


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


In HTML we will use the following tags

UL – Unordered List

It is used for declaring un order list.

<ul> List items </ul>

LI – List Item

It is used for declaring list items.

<li> Item name </li>

Logic behind the Java Script Tree View

First we need to prepare the HTML.

In tree view we have Parent Nodes, Child Nodes, Nodes.

To create nodes we will use the LI and UL tags of HTML.

To represent the parent node We will use one LI tag just above the UL

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 a tree view items add the following HTML snippet in your HTML File.


<li id="m1">Main 1</li>

<div id="l1cover">



<li id="inLst">2</li>

<div id="inCt1">












<li id="m2">Main 2</li>

<div id="l2cover">


<li id="inLst2">1</li>

<div id="inCt2">












Now to make your tree view working 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);



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 smartly. You can check my other articles on jQuery for more details on how to use it.

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


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


One comment on “Creating tree view in jQuery

  1. Yogesh Mishra
    March 17, 2015


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


This entry was posted on September 1, 2013 by in CodeProject, jQuery.


%d bloggers like this: