Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System

If you’re interested in mastering the main features that come bundled with the TreeView jQuery plug-in, start reading this series of articles. In it you’ll find numerous examples that will teach you how to utilize this library to build all sorts of professional-looking navigation trees. This is the second part of a four-part series.

Building a web-based hierarchical navigation mechanism that permits you to collapse and expand its branches with simple mouse clicks can be challenging even for the most seasoned web designer, especially when developing such an application from scratch. However, there’s no need to go to that extreme, since numerous JavaScript libraries are available that can tackle the development process from start to finish and produce amazing results.

Among these freely downloadable packages, there’s one that might be especially appealing to you, due to its flat learning curve and ease of customization. In this case, I’m talking about the “TreeView” jQuery plug-in. It’s a powerful JavaScript library created by Jörn Zaefferer which will let you build fully-customizable navigational trees by using only a few simple HTML lists, along with some straightforward CSS styles. 

And now that you’ve been introduced to the primary goal of this series, it’s time to review the topics that were treated in the previous part. In that tutorial I developed a couple of examples to demonstrate how to build some simple navigational trees using the plug-in. 

In the first case, the tree created was displayed initially on screen with all of its branches closed, while in the second example the branches were shown expanded. The collapse and expansion of the tree elements was controlled with a “closed” CSS class, assigned within the set of nested HTML lists that comprised the tree’s structure.  

It’s also possible, however, to configure the way in which the branches will be displayed directly with the plug-in in one single step. Therefore, in this second installment of the series, I’m going to code a few example that will show you how to accomplish this task easily. 

Now, let’s continue exploring the numerous and impressive capabilities of the “TreeView” jQuery plug-in. Let’s jump in! 

{mospagebreak title=Building basic hierarchical trees with the TreeView plug-in} 

It’s quite possible that you still haven’t the chance to go through the first installment of this series, where I created two examples that showed how to expand and collapse the branches of a simple navigational tree from inside the web page’s markup. With that idea in mind, I reintroduced these examples below, so you can see how they looked originally. Here they are:

 

(example on building a tree view with all the branches initially closed)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (branches are initially closed)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview();

});

</script>

</head>

<body>

<ul id="menu">

<li class="closed">Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

 

(example on building a tree view with all the branches initially opened)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (branches are initially open)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview();

});

</script>

</head>

<body>

<ul id="menu">

<li>Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

As depicted above by the two code samples, the “TreeView” plug-in makes building hierarchical menus a no-brainer process that only requires the creation of a few nested HTML lists. It’s that simple, really. In addition, it’s fair to notice that in the first case, all of the tree’s branches are displayed initially collapsed because they have been assigned a “closed” CSS class, while in the second example, the branches are shown opened instead, since the class has been simply removed from the pertinent lists. So far, these examples are not at all complicated, right? 

In summary, at this point you should have a clear idea of how to build tree menus with this jQuery plug-in. But to explore its functionality even  further, I’d like to code for you another example that shows how to create a tree where some of its branches are displayed expanded and others collapsed. 

To see how this new example will be properly developed, you’ll have to click on the link below and read the following section. 

{mospagebreak title=Controlling the tree’s branches display with the closed CSS class} 

In the preceding section, you learned how to build a couple of hierarchical trees where all of the branches were displayed in two specific states: opened and closed. Nonetheless, there might be cases where it would be necessary to combine these conditions simultaneously. The question is, how can this be done from inside the tree’s markup? Well, it’s extremely simple to achieve this by assigning the “closed” CSS class to the branches that need be collapsed and by removing it from the others. 

To learn how this process works, look at the following code sample, which mixes expanded and closed branches within the same tree:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (only some branches are initially closed)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview();

});

</script>

</head>

<body>

<ul id="menu">

<li class="closed">Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

There you have it. See how easy it is to combine closed and expanded branches in the same hierarchical tree? I guess you do, since the process is extremely simple to follow. In this particular case, the “closed” CSS class has been assigned to all the branches that need to be displayed open initially, while it’s been removed from the ones that are shown collapsed. 

Undeniably, the “TreeView” plug-in is flexible enough for controlling, from inside the tree’s markup, how branches will be displayed on screen. Even so, at this point you might be wondering if this same process can be performed directly with the plug-in’s own options, and fortunately the answer is a resounding yes! 

As I said in the introduction, the plug-in permits you to control the way that branches are shown initially via a specific option called “collapsed.” In the next section I’m going to discuss its usage in a concrete case in depth. 

Now, to learn more about how to use this plug-in option, go ahead and read the next section. 

{mospagebreak title=Collapsing tree branches with the TreeView plug-in} 

Provided that you already learned how to control the collapse and expansion of a tree’s branches using the “closed” CSS class, the last thing I’m going to cover in this tutorial will consist of replicating this process via the “collapsed” option provided by the “TreeView” plug-in. Basically, all that this option does is specify whether the mentioned branches will be displayed closed or opened initially. 

A simple demonstration of how to use the “collapsed” argument is shown below. Check it out:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (using collapsed option)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview({

collapsed: true

});

});

</script>

</head>

<body>

<ul id="menu">

<li>Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

As you can see, using the “collapsed” parameter to control how the branches of the tree will be shown in their initial state is really easy to grasp. For the example coded before, the argument simply specifies that all of the branches will be displayed closed, since a value of FALSE has been assigned to it. 

The following image illustrates the behavior of the previous hierarchical tree more clearly, when using the “collapsed: false” option:

 

 

Here you have it. At this time you should feel pretty satisfied, since you learned how to control, with a single option of the TreeView plug-in, the display of the tree’s branches. As I said before, this last example is the epilogue for this tutorial, so feel free to edit all of the code samples included in it to improve your skills with this powerful jQuery plug-in.

Final thoughts 

In this second episode of the series, I discussed the use of the “collapsed” option provided by the “TreeView” plug-in for controlling in one single step whether or not the branches of a specific tree will be displayed closed initially. 

In the next part, things will become even more interesting. You’ll learn how to apply a really neat animation effect to a specific tree when expanding and collapsing its branches. Don’t miss the upcoming article! 

[gp-comments width="770" linklove="off" ]
antalya escort bayan antalya escort bayan