The jQuery Treeview Plugin provides collapse all, expand all and toggle all support with very little effort on your part.
Simply add a treecontrol with three links, and
the treeview, to your page…
<div id="treecontrol">
<a title="Collapse
the entire tree below" href="#"><img src="../images/minus.gif" /> Collapse All</a>
<a title="Expand
the entire tree below" href="#"><img src="../images/plus.gif" /> Expand All</a>
<a title="Toggle
the tree below, opening closed branches, closing open branches" href="#">Toggle All</a>
</div>
<ul id="treeview" class="treeview-black">
<li>Item 1</li>
<li>
<span>Item 2</span>
<ul>
<li>
<span>Item 2.1</span>
<ul>
<li>Item 2.1.1</li>
<li>Item 2.1.2</li>
</ul>
</li>
<li>Item 2.2</li>
<li class="closed">
<span>Item 2.3 (closed at start)</span>
<ul>
<li>Item 2.3.1</li>
<li>Item 2.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
…and then associate
the control to
the treeview when defining
the treeview settings.
$("#treeview").treeview({
control: "#treecontrol",
persist: "cookie",
cookieId: "treeview-black"
});
It really couldn’t be easier and it works great!
But
the plugin doesn’t offer a lot of flexibility when it comes to layout. For example,
the plugin assumes your treecontrol will include links. If you want buttons or images or whatever, you are out of luck.
The plugin also assumes a set number of links and
the collapse all handler is associated with
the first link inside of
the treecontrol, a:eq(0),
the expand all handler is associated with
the second link and so on. So you really can’t incorporate
the toggle all link by itself unless you manually hide
the other options.
Which brings me to
the point of this post – making
the collapse/expand/toggle layout more flexible without modifying
the plugin’s source code. We will continue to use
the treecontrol actions but we’re not going to use them directly. In fact, our custom collapse, expand and toggle links will trigger
the actions for us. So, hide
the treecontrol links and associate
the treecontrol click events with
the click events of other
controls. Finally, render
the treeview with
the same setting definitions as usual.
$(document).ready(function() {
//
The plugin shows
the treecontrol after
the
// collapse, expand and toggle events are hooked up
// Just hide
the links.
$('#treecontrol a').hide();
// On click of your custom links, button, etc
// Trigger
the appropriate treecontrol click
$('#expandAll').click(function() {
$('#treecontrol a:eq(1)').click();
});
$('#collapseAll').click(function() {
$('#treecontrol a:eq(0)').click();
});
// Render
the treeview per usual.
$("#treeview").treeview({
control: "#treecontrol",
persist: "cookie",
cookieId: "treeview-black"
});
});
Since I’m not using
the treecontrol directly, I move it to
the bottom of
the page but it doesn’t really matter where
the treecontrol goes.
<div>
<a id="collapseAll" href="#">Collapse All Outside of TreeControl</a>
</div>
<ul id="treeview" class="treeview-black">
<li>Item 1</li>
<li>
<span>Item 2</span>
<ul>
<li>
<span>Item 2.1</span>
<ul>
<li>Item 2.1.1</li>
<li>Item 2.1.2</li>
</ul>
</li>
<li>Item 2.2</li>
<li class="closed">
<span>Item 2.3 (closed at start)</span>
<ul>
<li>Item 2.3.1</li>
<li>Item 2.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
<div>
<input type="button" id="expandAll" value="Expand All Outside of TreeControl"/>
</div>
<div id="treecontrol">
<a href="#"></a><a href="#"></a><a href="#"></a>
</div>
The above jQuery and Html snippets generate
the following ugly output which shows
the separated collapse/expand elements. If you want
the toggle all option, I bet you can figure out how to put it in place. I’ve made
the source available below if you’re interested.
Download jQuery Treeview Expand and Collapse Super Code
