function expand all on tree menu

[rkz]

I have a tree menu script.

I need function that would collapse all my menu items.
using like: <a href="#" onclick="expandall()">expand all</a>
<a href="#" onclick="closeall()">default tree</a> (sorry don't know how to say it).

I cant do it myself, please help me, it shouldnt be very difficult


Code:

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.expand{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
getElementbyClass("expand")
if (enablepersist=="on" && typeof ccollect!="undefined")
revivecontent()
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

thank you, for your attention

[rangana]

Please show the markup (HTML) involved.

[rkz]

   <ul  class="treeview">
<script type="text/javascript" language="javascript" src="lib/helparea.js"></script>
<div>
<ul>

<li>
<a id="pic56"  onclick="expandcontent('sub56')" style="cursor:hand;">
<span class="sectionheader">Japoniški įrankiai
</span></a>
<div id="sub56" class="expand"><ul>
<li>
<a id="pic58"  onclick="expandcontent('sub58')" style="cursor:hand;">
<span class="sectionheader">pjūklai 
</span></a>
<div id="sub58" class="expand"><ul>
<li>
<a id="pic59" href="?page=dozuki" style="cursor:hand;">
dozuki 
</a>
</li>

<li>
<a id="pic62" href="?page=ryoba" style="cursor:hand;">
ryoba
</a>
</li>

<li>
<a id="pic63" href="?page=kataha" style="cursor:hand;">
kataha
</a>
</li>

<li>
<a id="pic64" href="?page=vieliniai" style="cursor:hand;">
vieliniai
</a>
</li>

<li>
<a id="pic66" href="?page=priedai" style="cursor:hand;">
priedai
</a>
</li>
</ul></div></li>

<li>
<a id="pic67"  onclick="expandcontent('sub67')" style="cursor:hand;">
<span class="sectionheader">galąstuvai
</span></a>
<div id="sub67" class="expand"><ul>
<li>
<a id="pic68" href="?page=dirbtiniai" style="cursor:hand;">
dirbtiniai
</a>
</li>

<li>
<a id="pic69" href="?page=stovai" style="cursor:hand;">
stovai
</a>
</li>
</ul></div></li>
etc..

Im using this script on cmsms

[rangana]

Base on your code, you can call the contractcontent function to contract all the elements, and expandcontent function to expand elements (base on the class) that you want to expand.

See the implementation:

<input type="button" value="Contract All" onclick="contractcontent('treeview')">
<input type="button" value="Expand All" onclick="expandcontent('sub56');expandcontent('sub67')">

Hope that helps.

[rkz]

Originally Posted by rangana

Base on your code, you can call the contractcontent function to contract all the elements, and expandcontent function to expand elements (base on the class) that you want to expand.

See the implementation:

<input type="button" value="Contract All" onclick="contractcontent('treeview')">
<input type="button" value="Expand All" onclick="expandcontent('sub56');expandcontent('sub67')">

Hope that helps.

Actually there are many such links from sub01to sub99 and etc, So I need something wildcard like expandcontent('sub*'); or something that I dont know

[rangana]

If the class names are from sub01 to sub99, then create a for loop:

<input type="button" value="Contract All" onclick="contractcontent('treeview')">
<input type="button" value="Expand All" onclick="for(var i=1;i<=99;i++)expandcontent(i<10?'0'+i:i);">

Hope that makes sense.-

[rkz]

Originally Posted by rangana

If the class names are from sub01 to sub99, then create a for loop:

<input type="button" value="Contract All" onclick="contractcontent('treeview')">
<input type="button" value="Expand All" onclick="for(var i=1;i<=99;i++)expandcontent(i<10?'0'+i:i);">

Hope that makes sense.-

Contract all, works fine.
But expand all, has error (Object required) and not working
I dont know js syntax, but in php it would be something like this:
onclick="for($i=0; $i<$n; $i++) {echo "expandcontent('sub'.$i.');"}";

In ohter words, i need to optimize
onclick="expandcontent('sub1');expandcontent('subn-1');expandcontent('subn');expandcontent('subn+1');"

in ideal way; $n there should be numer of items id="sub.."

[rangana]

Err, it was my mistake, apologies. Add highlighted instead:

<input type="button" value="Contract All" onclick="contractcontent('treeview')">
<input type="button" value="Expand All" onclick="for(var i=1;i<=99;i++)expandcontent('sub'+i<10?'0'+i:i);">

[rkz]

the some error :/