How Do I Create Expand All and Collapse All Links Outside of the jQuery Treeview Plugin?

Question

The jQuery Treeview Plugin adds Collapse All, Expand All and Toggle All links to the "treeviewcontrol" div when the control property is defined as follows:

$("#black, #gray").treeview({
   control: "#treecontrol",
   persist: "cookie",
   cookieId: "treeview-black"
});

This works great, but I'd like the ability to expand and collapse the treeview from other page elements outside of the treeview itself. I've looked at the source, but I can't figure it out.

Answer 1

If you check out the demo page here you can see there is a div#treecontrol, well just make it a treecontrol class:

<div class="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>

Then you can make as many copies of this control and put them anywhere you want. Don't forget to modify the control parameter:

$("#tree").treeview({ control: ".treecontrol" })

Answer 2

Try:

$(".treeview").treeview({  // ".treeview" is your selector
  control: "#treecontrol", // this is your controller
  persist: "cookie",
  cookieId: "treeview-black"
});

That will close every single list with class "treeview" every time you click the "Collapse All" under the div#treecontrol.