Switch Content showstate problems

[daCyclist]

Script: Switch Content Script
url: http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

I am having problems with the expand/contract "showstate" function. I have four sections that expand, the first works just fine, the 2nd when expanded changes the "showstatus" for the 3rd but not itself, the 3rd when expanded changes nothing, same with the 4th. When I use the expand all function (accessed with the top 'print page' image), all four change properly.

I tried using both the default html + / -, as well as my own graphics.

Everything else works perfectly and the script is fantastic for my needs.

My test page:
url: http://www.cyclevents.com/test/test3.htm

[jscheuer1]

My guess is that the <b></b> element is ignored and that the script is keying off of the <p></p> element. Try substituting:

<span style="font-weight:bold"

for:

<b

and:

</span>

for:

</b>

[daCyclist]

Thanks for the idea but no go. I even tried eliminating the <p>,</P>, but still the same results. :(

But I did discover that it has something to do with the smaller div containing graphics. My page is laid out, using blocks of text and graphic image separators:

text
graphic
text
graphic
. . . . . etc

The links open each of the text sections individually, and when you use the sweeptoggle('expand') it opens everything, so that the images break up the bigger page visually.

If I delete the graphic div's then it works just fine. Or if I add "links" to each of the graphic div's it works fine, but I end up with extra x/-'s that only show horizontal bars.

Ultimately I could build the horizontal bar into each text section, but it is much cleaner if I can figure out how to do it through the Switch Content functions.

Any ideas ??

[jscheuer1]

It's definitely those extra divisions:

<div id="tour5" class="switchcontent">

I'd give them a different class name and no id. Then I'd control their behavior separately, let's change the class name to "printdivider":

<div class="printdivider">

Now in the style, set that class to display:none -

<style type="text/css">
.printdivider {
display:none;
}
</style>Then, wherever/whenever you want them to appear/disappear in the script or elsewhere, they can be addressed thusly:

To disappear:

printDivs=document.getElementsByTagName('div')
for (var i = 0; i < isrc.length; i++)
if (printDivs[i].className=='printdivider')
printDivs[i].style.display='none'To appear:

printDivs=document.getElementsByTagName('div')
for (var i = 0; i < isrc.length; i++)
if (printDivs[i].className=='printdivider')
printDivs[i].style.display='block'Notes:
Just a rough idea, it will work. Better to start out with the dividers displayed and hide them onload using javascript, so that they are there for non javascript browsers. The hide/display code can be more efficient and if done right, the printDivs variable only needs to be declared once.

[daCyclist]

Thanks again John, but being "javascripting challenged" to the max (when I learned programming in college, fortran was the newest thing ;) ) I am having a hard time figuring out exactly where you mean for me to incorporate those snippets of code. I tried a bunch of experiments (ie: guesses) without success.

You did get me thinking and after perusing a ton of javascript tutorials, I did come up with an alternative solution by adding the following to the script:

function printbar(thistag) {
styleObj=document.getElementById(thistag).style
styleObj.display="block"
}
function noprintbar(thistag) {
styleObj=document.getElementById(thistag).style;
styleObj.display="none";
}

function pageprint(){
sweeptoggle('expand')
printbar('pd1')
printbar('pd2')
printbar('pd3')
print()
}


And then modifying the contractcontent function, to eliminate the bars:

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

I am sure there maybe an easier way to do this, so that I don't have to specify each of the div's individually. . . . . . .

[Twey]

for(i=1;i<=3;i++) printbar('pd'+i);
for(i=1;i<=3;i++) noprintbar('pd'+i);

[daCyclist]

Thank you Twey, that did the trick :)