Switch Contents script with many SC's

[Meni]

1) Script Title: Switch contents script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm

3) Describe problem:

When i used this script on my pages everything worked like a charm until i added the 10th "SC"

See code below:


<table width="100%">
<tr>
<td class="heading" colspan="2" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc1')" style="cursor:hand;">1</td>
<td onClick="sweeptoggle('contract'); expandcontent(this, 'sc2')" class="heading" valign="top" style="cursor:hand;">2</td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc3')" style="cursor:hand;">3 </td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc4')" style="cursor:hand;">4 </td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc5')" style="cursor:hand;">5</td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc6')" style="cursor:hand;">6</td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc8')" style="cursor:hand;">8</td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc9')" style="cursor:hand;">9</td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc7')" style="cursor:hand;">7</td>
<?php
$id = $_GET['id'];
$sql01 = "SELECT `id`,`clientTypeNumber` FROM `clients` WHERE `id` = '$id'";
$query01 = mysql_query($sql01);
$res01 = mysql_fetch_array($query01);
if($res01['clientTypeNumber'] > '1' && $res01['clientTypeNumber'] < '4') {
$iscompany = '1';
}
if ($iscompany = '1') {
echo '
<td class="heading" valign="top" onClick="sweeptoggle(\'contract\'); expandcontent(this, \'sc10\')" style="cursor:hand;">10</td>
';
}
?>
</tr>
<tr>
<td colspan="10" valign="top" id="sc1" class="switchcontent">
<?php include 'clientdetails.php'; ?>
</td>
</tr>
<tr>
<td colspan="10" valign="top" id="sc2" class="switchcontent">
<?php include 'yeladudes.php'; ?>
</td>
</tr>
<tr>
<td colspan="10" valign="top" id="sc3" class="switchcontent">
<?php include 'hazharothon.php'; ?>
</td>
</tr>
<tr>
<td colspan="10" valign="top" id="sc4" class="switchcontent">
<?php include 'drishalehazhon.php'; ?>
</td>
</tr>
<tr>
<td colspan="10" valign="top" id="sc5" class="switchcontent">
<?php include 'hagashot.php'; ?>
</td>
</tr>
<tr>
<td colspan="10" valign="top" id="sc6" class="switchcontent">
<?php include 'hamhaot.php'; ?> </td>
</tr>
<tr>
<td colspan="10" valign="top" id="sc8" class="switchcontent">
<?php include '../comments/newcomment.php'; ?>
</td>
</tr>
<tr>
<td colspan="10" valign="top" id="sc9" class="switchcontent">
<?php include '../payments/index.php'; ?>
</td>
</tr>
<tr>
<td colspan="10" valign="top" id="sc7" class="switchcontent">
<?php include 'hours.php'; ?>
</td>
</tr>
<?php
if ($iscompany = '1') {
echo '
<tr>
<td colspan="10" valign="top" id="sc10" class="switchcontent">';
include '../hevshut/index.php';
echo '
</td>
</tr>
';
}
?>
</table>

The 10th SC won't work, but all the rest do.

Any ideas?

[jscheuer1]

If you just look at the syntax highlighting of your own code from your post, you will see that you have deviated from your own established pattern with the sc10 entry. That may or may not have anything to do with it.

[Meni]

I am sorry - I don't get you.
Where do you see the deviation?

[jscheuer1]

I just did a test, and if the recommended markup is followed, there seems to be no real limit:


<!--Optional Expand/ Contact All links. Remove if desired-->
<div style="margin-bottom: 5px"><a href="javascript:sweeptoggle('contract')">Contract All</a> | <a href="javascript:sweeptoggle('expand')">Expand All</a></div>

<div class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc1')" />What is JavaScript?</div>
<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>
<br />

<div class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc2')" />Difference betwen Java & JavaScript?</div>
<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>
<br />

<table border="0" cellspacing="0" cellpadding="0">
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc3')" />What is DHTML? (table example)</td></tr>
<tr><td 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.</td></tr>
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc4')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc4" 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.</td></tr>
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc5')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc5" 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.</td></tr>
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc6')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc6" 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.</td></tr>
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc7')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc7" 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.</td></tr>
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc8')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc8" 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.</td></tr>
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc9')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc9" 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.</td></tr>
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc10')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc10" 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.</td></tr>
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc11')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc11" 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.</td></tr>
<tr><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc12')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc12" 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.</td></tr>
</table>

[Meni]

when you say I deviated - do you mean because i switched to PHP in the 10th SC?

[jscheuer1]

That part looks OK but, there is no way to be certain what its generated markup looks like. So, yes and it's more than that. The entire markup doesn't follow the examples laid out for you on the demo page. Some liberties may be taken with this markup but, you have obviously crossed a line or you wouldn't be having problems. Here:



<table width="100%">
<tr>
<td class="heading" colspan="2" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc1')" style="cursor:hand;">1</td>
<td onClick="sweeptoggle('contract'); expandcontent(this, 'sc2')" class="heading" valign="top" style="cursor:hand;">2</td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc3')" style="cursor:hand;">3 </td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc4')" style="cursor:hand;">4 </td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc5')" style="cursor:hand;">5</td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc6')" style="cursor:hand;">6</td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc8')" style="cursor:hand;">8</td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc9')" style="cursor:hand;">9</td>
<td class="heading" valign="top" onClick="sweeptoggle('contract'); expandcontent(this, 'sc7')" style="cursor:hand;">7</td>


You have no trigger for sc10, and all of the triggers you do have are grouped together (the grouping should be OK if properly done). Each trigger is meant to go just above its content though. Additionally, tables in this sort of situation are complicated. If you do anything, even inadvertently, to break the table's layout integrity, unexpected things will usually happen.

To diagnose if and if, how the table's integrity has been broken, it would be easiest to have a link to a live demo where I could view the page's generated source. You should also seriously consider using the division layout model (as opposed to the table shown in your post), it will be easier to work with in the long run.