Expand/Collapse All

Click the image or text to collapse or expand the sub-tree

expand all

collapse all

Steps to control the expanding or collapsing of the menu-tree in above sample.

1. Create an HTML page, and insert the tree menu into it.

2. Select the "Root" in the Tree panel, and then get the codes for expanding or collapsing the sub-tree from Global Settings > Advanced.

3.Insert the images and that refers expanding or collapsing the sub-tree. Then copy the codes which expand or collapse sub-tree and paste them to the web page as follows.

Four pieces of codes are inserted in this sample:

For expanding image:

<img src="0609_f.gif" onClick="stExpandSubTree('tree6575',0,1);return false;">

For expanding text:

<a href="#" onClick="stExpandSubTree('tree6575',0,1);return false;">expand all</a>

For collapsing image:

<img src="0609_uf.gif" onClick="stCollapseSubTree('tree6575',0,1);return false;">

For collapsing text:

<a href="#" onClick="stCollapseSubTree('tree6575',0,1);return false;">collapse all</a>

Note: Please input the above red codes manually, and make sure the function works well. The codes "return false" must be added into the <a></a> tag when the function "onclick" is called; if not, it causes the page refreshing in IE and Opera 9+ on Mac. And the codes can be copied from Tree Menu program except for the above-mentioned two parts.

Ok, click the image or text to experience.