Showstate problem with switch content

[rizlaa]

Script: Switch Content Script (modified)
URL: http://www.dynamicdrive.com/forums/showthread.php?t=8186

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

Hi,

I'm using a modified version of the Switch Content Script.

I've got this script working for me with one slight problem. I have the showstate span in a separate td to its corresponding heading, e.g.

I have:



<td onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer">Menu</td>
<td onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span></td>


whereas in the original script it says to do this:


<h3 onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>What is JavaScript?</h3>

When I click on the second td it switches the image from + to -, but this doesn't happen when clicking on the first td.

Hope this was clear!

Regards,
Riz

[jscheuer1]

Well, you are launching into an area where we become dependant upon your markup following what you have outlined above. That is, with a td following a td, the second one containing the 'showstate' span. As long as you follow that formula, this will work. Add this function to the script, it can go at the end, just above the </script> tag:


function findNextCell(obj){
returnobj=obj.nextSibling;
while(typeof returnobj.tagName=='undefined'||returnobj.tagName.toLowerCase()!=='td')
if(returnobj.nextSibling)
returnobj=returnobj.nextSibling
else {
alert('markup error')
return;
}
return returnobj;
}

Once that is installed, you can use this syntax in the HTML part:


<td onClick="expandcontent(findNextCell(this), 'sc1')" style="cursor:hand; cursor:pointer">Menu</td>
<td onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span></td>


If you goof up, it will let you know. You also can still use the original syntax wherever that applies, as in the second td or if you wish to have something like this:


<h3 onClick="expandcontent(this, 'sc2')" style="cursor:hand; cursor:pointer"><span class="showstate"></span>Difference betwen Java & JavaScript?</h3>


elsewhere on the page.

[jscheuer1]

Oh, by the way, I don't know what you have planned for the rest of the markup but, these type of scripts tend to get messy (especially in IE) with tables if you are trying to expand a table row. Instead, expand a table cell or a division in a table cell or a division outside of the table.

[rizlaa]

Thanks, works perfectly.

I am expanding and contracting my data as follows:



<tr><td style="WIDTH: 100%" colspan=3>
<div id="sc1" class="switchcontent">#BODY#</div>
</td></tr>


where #BODY# will be content inside a table.