Nunzio's Message Board

[dmstaton]

Nunzio,

I am playing with the script you posted at http://forums.devshed.com/t77556/s.html regarding expanding and collapsing tables. I have it working and I am using it in an ASP.NET page with a C# code behind. There are 5 or 6 tables that list folder contents of 5 or 6 separate folders on the server hard drive.

Right now when you open or expand on table it opens fine, then if I try to expand another table it opens but collapses the table that was previously opened. I would like to be able to open several without them closing and the user would be able to just open or close them individually but they would be able to have them all open if they wanted to.

I am assuming that I will have to make changes to the .js file in order to have the page leave the tables that have been opened open until the user selectively closes them.

Any help you could offer would be greatly appreciated.

Thanks

David
dmstaton@gmail.com

[Nunzio]

Okay David. I understand what you want.
I am posting a modified version of the script for you in this thread that will now allow for 2 types of expanding behavior...

1. You can specify that only one content should be visible at any one time
2. You can now also specify that previously opened content will continue to be visible

The new behavior (#2 above, and what you are looking for) is accomplished by adding a new variable to the javascript --> collapseprevious

All you need to do in the javascript (code is posted below) is to change var collapseprevious="no" to var collapseprevious="yes". A "no" value will not allow any previously opened table to close again. A "yes" value will, which was the default (and only) behavior of the javascript that I had initially posted in my post in the DevShed forums way back in August 2003. Wow! That was a long time ago! How the hell did you even find that old thread there?

By the way... you said you're using tables. The script can be applied to almost any type of page content... <table>, <div>, <p>, etc, so keep that in mind too.

Okay. Here's the revised code...

<script="Javascript" type="text/javascript">

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('.switchcontent{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(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
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

</script>

Okay David. I hope this helped.

Take care,
Nunzio
_________________
Nunzio's Little Place On The Web
Moderator - Winamp Forums