bphein1980
10-29-2006, 04:16 PM
Hello,
I am using a script found on Dynamic Drive and edited it a bit to fit my needs. Its a script to toggle a content area and at the same time display a + or - depending on if the content is displayed or not. The problem, the state of the content area is saved in a cookie, but the +/- state is not. I have gone over some cookie tutorials and looked through the forums, but I just couldnt figure how to edit the code to make the +/- save state.
Here is the javascript:
/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Oct 21st, 2003.
* Visit http://www.dynamicdrive.com/ for full source 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('.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){
var plus = 'plus' + cid;
var minus = 'minus' + cid;
if (document.getElementById(cid).style.display == "none"){
document.all[plus].style.display = 'none';
document.all[minus].style.display = '';
}else{
document.all[plus].style.display = '';
document.all[minus].style.display = 'none';
}
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("switchcontent")
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
Here is the HTML:
<div class="menu_title" onClick="expandcontent('u1')">News
<span id="plusu1"><img src="layout_images/plus.gif" border="0"/></span>
<span id="minusu1" style="display:none;"><img src="layout_images/minus.gif" border="0"/></span>
</div>
<div class="switchcontent" id="u1">
<?php include 'menu_news.php'; ?>
</div>
<div class="menu_title" onClick="expandcontent('u2')">Profiles
<span id="plusu2"><img src="layout_images/plus.gif" border="0"/></span>
<span id="minusu2" style="display:none;"><img src="layout_images/minus.gif" border="0"/></span>
</div>
<div class="switchcontent" id="u2">
<?php include 'menu_profiles.php'; ?>
</div>
How can I get the state of the +/- to save as well?
I am using a script found on Dynamic Drive and edited it a bit to fit my needs. Its a script to toggle a content area and at the same time display a + or - depending on if the content is displayed or not. The problem, the state of the content area is saved in a cookie, but the +/- state is not. I have gone over some cookie tutorials and looked through the forums, but I just couldnt figure how to edit the code to make the +/- save state.
Here is the javascript:
/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Oct 21st, 2003.
* Visit http://www.dynamicdrive.com/ for full source 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('.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){
var plus = 'plus' + cid;
var minus = 'minus' + cid;
if (document.getElementById(cid).style.display == "none"){
document.all[plus].style.display = 'none';
document.all[minus].style.display = '';
}else{
document.all[plus].style.display = '';
document.all[minus].style.display = 'none';
}
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("switchcontent")
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
Here is the HTML:
<div class="menu_title" onClick="expandcontent('u1')">News
<span id="plusu1"><img src="layout_images/plus.gif" border="0"/></span>
<span id="minusu1" style="display:none;"><img src="layout_images/minus.gif" border="0"/></span>
</div>
<div class="switchcontent" id="u1">
<?php include 'menu_news.php'; ?>
</div>
<div class="menu_title" onClick="expandcontent('u2')">Profiles
<span id="plusu2"><img src="layout_images/plus.gif" border="0"/></span>
<span id="minusu2" style="display:none;"><img src="layout_images/minus.gif" border="0"/></span>
</div>
<div class="switchcontent" id="u2">
<?php include 'menu_profiles.php'; ?>
</div>
How can I get the state of the +/- to save as well?