Home arrow JavaScript arrow Page 4 - Creating a TreeView JQuery Hierarchical Navigation System

Collapsing tree branches using the TreeView plug-in - JavaScript

Are you interested in adding animation effects to the drop-down menus on your web page, but afraid that it's going to take long hours of painful coding to pull it off? Keep reading. This series of articles will show you how to work some easy magic with the Treeview JQuery plug-in and a simple nested HTML list.

TABLE OF CONTENTS:
  1. Creating a TreeView JQuery Hierarchical Navigation System
  2. The skeleton of the tree view system
  3. Using the TreeView plug-in
  4. Collapsing tree branches using the TreeView plug-in
By: Alejandro Gervasio
Rating: starstarstarstarstar / 7
April 20, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

In the previous section, you learned how to create a hierarchical menu tree where all of its branches were initially displayed collapsed. However, it’s very easy to modify this behavior and make them appear opened instead. To accomplish this, I simply need to remove the “closed” CSS classes assigned to the pertinent branches, as is demonstrated by the following example:

 

<!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>

Now that all of the “closed” CSS classes have been removed from each branch of the tree, they’ll be displayed initially open. The result of this process can be seen more clearly if you look at the screen shot below:

Hopefully, this example demonstrates how easy it is to construct hierarchical trees with the help of the TreeView jQuery plug-in. As usual, feel free to edit the code sample developed in this tutorial, so you can acquire more practice with this powerful JavaScript library.

Final thoughts

In this first chapter of the series, I introduced you to using the TreeView jQuery plug-in to create a professional hierarchical navigation system. Nonetheless, I’m only scratching the surface of the numerous features that come packaged with the plug-in. In the upcoming part I’m going to explain how to control which branches of the tree must be displayed collapsed and expanded.

Now that you’ve been told what topics will be covered in the next article of this series, you simply can’t miss it!  



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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- 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: