Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System - Controlling the tree’s branches display with the closed CSS class (
Page 3 of 4 )
In the preceding section, you learned how to build a couple of hierarchical trees where all of the branches were displayed in two specific states: opened and closed. Nonetheless, there might be cases where it would be necessary to combine these conditions simultaneously. The question is, how can this be done from inside the tree’s markup? Well, it’s extremely simple to achieve this by assigning the “closed” CSS class to the branches that need be collapsed and by removing it from the others.
To learn how this process works, look at the following code sample, which mixes expanded and closed branches within the same tree:
<!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 (only some branches are initially closed)</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 class="closed">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 class="closed">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 class="closed">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>
There you have it. See how easy it is to combine closed and expanded branches in the same hierarchical tree? I guess you do, since the process is extremely simple to follow. In this particular case, the “closed” CSS class has been assigned to all the branches that need to be displayed open initially, while it’s been removed from the ones that are shown collapsed.
Undeniably, the “TreeView” plug-in is flexible enough for controlling, from inside the tree’s markup, how branches will be displayed on screen. Even so, at this point you might be wondering if this same process can be performed directly with the plug-in's own options, and fortunately the answer is a resounding yes!
As I said in the introduction, the plug-in permits you to control the way that branches are shown initially via a specific option called “collapsed.” In the next section I’m going to discuss its usage in a concrete case in depth.
Now, to learn more about how to use this plug-in option, go ahead and read the next section.
