jQuery Treeview – Expand and Collapse All Without the TreeControl

Posted by Ben Griswold on Johnny Coder See other posts from Johnny Coder or by Ben Griswold
Published on Fri, 09 Apr 2010 01:27:45 +0000 Indexed on 2010/04/09 1:43 UTC
Read the original article Hit count: 780

Filed under:

controls

jQuery

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

Developer IT