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

Collapsing tree branches with the TreeView plug-in - JavaScript

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.

TABLE OF CONTENTS:
  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
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

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! 



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