Home arrow JavaScript arrow Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System

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.

  1. Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System
  2. Building basic hierarchical trees with the TreeView plug-in
  3. Controlling the tree’s branches display with the closed CSS class
  4. Collapsing tree branches with the TreeView plug-in
By: Alejandro Gervasio
Rating: starstarstarstarstar / 3
April 27, 2009

print this article



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! 

>>> More JavaScript Articles          >>> More By Alejandro Gervasio

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: