Contractible Headers Script & swap image???

[fizzyfozzy]

Script: Contractible Headers Script
http://www.dynamicdrive.com/dynamicindex1/navigate2.htm

Hi,

I am using the contractible headers script with no problems at all.
However I was wondering whether it is possible to combine it with a swap image behaviour?
I would like to have a plus next to my header which changes to a minus once expanded - like a menu tree - however I would prefer to use this script rather than the smart folding menu tree one.

I attempted this using a swap image behaviour in dreamweaver but I can only get it to change once with that & not back again when clicked again.

Can anyone help me out with this?

Thanks a lot

Michelle

[jscheuer1]

You can do that without using images. Try these modifications to the original demo:

Below the line that says:

var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

add this variable:

var nbs=(document.getElementById&&!document.all)? ' ' : ''

Replace 'function contractcontent' with this version:

function contractcontent(omit,omitspan){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
var spans=document.getElementsByTagName('span')
for (i = 0; i < spans.length; i++){
if (spans[i].id.indexOf('sp')!==-1&&spans[i].id!==omitspan)
spans[i].innerHTML='+'
}
}

Replace 'function expandcontent' with this one:

function expandcontent(cid,sid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid,sid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
document.getElementById(sid).innerHTML=(document.getElementById(sid).innerHTML==nbs+'-')? '+' : nbs+'-'
}
}

Replace 'function revivecontent' with:

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++){
document.getElementById(selectedComponents[i]).style.display="block"
var spansId='sp'+document.getElementById(selectedComponents[i]).id.substr(2)
document.getElementById(spansId).innerHTML=nbs+'-'
}
}

Finally, add this to your html markup:

<span id="sp1" style="font-family:'arial black';display:inline-table;width:1em;text-align:center">+</span>

Make sure that the id="sp1" uses the same number as the id="sc#" that follows it. And be sure to include the new span id in the call for expandcontent(). Ex:

<h3 onClick="expandcontent('sc1','sp1')" style="cursor:hand; cursor:pointer"><span id="sp1" style="font-family:'arial black';display:inline-table;width:1em;text-align:center">+</span> What is JavaScript?</h3>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

[fizzyfozzy]

Thanks for that, it works really well.

One more question though - what if I wanted to use images? Say if I wanted arrows instead of plous & minus? Is that also possible?

[jscheuer1]

You are better off using characters rather than images due to load time problems with dial-up users and the possibility that a user may have images turned off. There are arrow characters you can use:

→ an arrow that looks something like this but, much better: ->

and:

↓ an arrow that points down.

You can substitute the → for all the plus (+) characters we inserted in the script and html, and the ↓ for all the minus (-) characters but, it gets a little more complicated. This line in the script:

document.getElementById(sid).innerHTML=(document.getElementById(sid).innerHTML==nbs+'-')? '+' : nbs+'-'

must be replaced with these two lines:

var itemChar=escape(document.getElementById(sid).innerHTML)
document.getElementById(sid).innerHTML=(itemChar.indexOf('%u2193')!==-1) ? '→' : nbs+'↓'

owing to the way javascript reads innerHTML using number entities.

If you must, images can be used in place of characters. For example, plus can be replaced by <img src="closed.gif"> and minus by <img src="open.gif">. If you go that route, the line:

document.getElementById(sid).innerHTML=(document.getElementById(sid).innerHTML==nbs+'-')? '+' : nbs+'-'

needs to be replaced by:

document.getElementById(sid).innerHTML=(document.getElementById(sid).innerHTML.indexOf('open.gif')!==-1)? '<img src="closed.gif">' : '<img src="open.gif">'

and get rid of all the occurrences of:

nbs+

and this line:

var nbs=(document.getElementById&&!document.all)? ' ' : ''

[fizzyfozzy]

Thanks very much for all your help. It is very much appreciated!

[button1]

Thank you jscheuer1 for all this help! You are amazing!!

I am able to get the Contractible Headers script to function perfectly without images. And, there is no problem with the + and – signs. And again no problem with the &#x2192; &#x2193; arrows.

However when applying your solution (images can be used in place of characters) I run into a little difficulty.

I replaced the + with <img src="closed.gif"> and the - with <img src="open.gif">. I also replaced the document.getElementById(sid).innerHTML with the new one. Got rid of all the occurrences of nbs+. And removed the var nbs=… line

What I get:

1. Everything loads OK – all headers display the <img src="closed.gif"> image – Perfect.
2. When I click on a header the div opens and the <img src="open.gif"> image is displayed – Perfect.
3. When I click on that same header the div closes but the image does not swap back to the <img src="closed.gif"> image – NOT Perfect.
4. The image only swaps to the <img src="closed.gif"> image when I select a different header – Perfect.

Any ideas what I'm missing?

[jscheuer1]

Sounds like you did everything correctly but, perhaps not. Here is a working demo with images:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
* Visit http://www.dynamicdrive.com/ for full source code
* Modified by jscheuer1 to use images with the header elements in
* http://www.dynamicdrive.com/forums
***********************************************/

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,omitspan){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
var spans=document.getElementsByTagName('span')
for (i = 0; i < spans.length; i++){
if (spans[i].id.indexOf('sp')!==-1&&spans[i].id!==omitspan)
spans[i].innerHTML='<img src="closed.gif">'
}
}

function expandcontent(cid,sid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid,sid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
document.getElementById(sid).innerHTML=(document.getElementById(sid).innerHTML.indexOf('open.gif')!==-1)? '<img src="closed.gif">' : '<img src="open.gif">'

}
}

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

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>
</head>
<body>
<h3 onClick="expandcontent('sc1','sp1')" style="cursor:hand; cursor:pointer"><span id="sp1" style="font-family:'arial black';display:inline-table;width:1em;text-align:center"><img src="closed.gif"></span> What is JavaScript?</h3>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<h3 onClick="expandcontent('sc2','sp2')" style="cursor:hand; cursor:pointer"><span id="sp2" style="font-family:'arial black';display:inline-table;width:1em;text-align:center"><img src="closed.gif"></span> Difference betwen Java & JavaScript?</h3>
<div id="sc2" class="switchcontent">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>

<h3 onClick="expandcontent('sc3','sp3')" style="cursor:hand; cursor:pointer"><span id="sp3" style="font-family:'arial black';display:inline-table;width:1em;text-align:center"><img src="closed.gif"></span> What is DHTML?</h3>
<div id="sc3" class="switchcontent">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>
</body>
</html>

[button1]

Still can’t get it. I even copied and pasted your working demo into my include

A few of things however:

1. I am currently using your modified cookie code to function for the site not just the page (http://www.dynamicdrive.com/forums/s...ead.php?t=6253). Will this effect the script?

2. Re: your working demo. You show var collapseprevious="no" – I am using “yes”. Will this effect the script?

3. I also noticed in the code you provided - the function revivecontent() still shows .innerHTML='-' . Is this OK?

[jscheuer1]

1 ) No.
2 ) No.
3 ) Problem, it should read:

document.getElementById(spansId).innerHTML='<img src="open.gif">'

However, I'm a bit concerned about your saying:

I even copied and pasted your working demo into my include

None of this has been tested out as an include. That can often throw off a script.

[button1]

Thanks again jscheuer1 you’ve been such a great help but no matter what I try I always get the same result. I tried:

1. Removing the include and add the script to my navigation page.
2. Change the function revivecontent() to read .innerHTML='<img src="open.gif">'
3. Copied and pasted your revised script to my page

When the page firsts loads the image is correct (<img src="closed.gif">). When I click on the header the div opens and the image swaps perfectly (<img src="open.gif">). But when I click on that same header again to close the div the image does not swap to its original state – it stays the same (<img src="open.gif">). The only way it swaps to its original state (<img src="closed.gif">) is when I click on a different header.

I’m getting very frustrated. I think I’ve tried everything. If I cannot get the script to work I will use the script without images. Both of your other solutions (+ and – signs OR arrows) work great! Too bad though…

Thanks Bill