Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System - Collapsing tree branches with the TreeView plug-in (
Page 4 of 4 )
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!
