Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System

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!