Switch content with mutliple cells and rows in a table

[Skinnybobb]

1) Script Title: Switch Content Script II

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

3) Describe problem: I am using the above script with tables. Is it possible to have more than 1 cell and 1 row underneath its header?

My useless HTML code so far:


<table border="0" width="99%" cellspacing="0" cellpadding="0">
<tr>
<td class="headers" colspan="2"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc3')" />What is DHTML? (table example)</td>
</tr>
<tr>
<td id="sc3" class="switchcontent">This is the first cell on the first row under the DHTML header.</td>
<td id="sc3" class="switchcontent">This is cell 2</td>
</tr>
<tr>
<td id="sc3" class="switchcontent">This is the first cell on the second row under the DHTML header.</td>
<td id="sc3" class="switchcontent">This is cell 2</td>
</tr>
</table>


With this change to the css:


.switchcontent{
width: 49%;
border: 1px solid black;
border-top-width: 0;
}


Thanks for any help.
SB

[jscheuer1]

I would think so but, since various browsers treat tables and scripting differently from one another, the safest bet to get that type of effect would be to use just one cell. If you want the content within that cell to be tabular, put a table in it. However, nested tables are to be avoided if at all possible so, what you could do is go back to the division type implementation and put each (what would now have been sub) table in an expandable/contractible division.

Tables should only be used for tabular data so, if you can get the look that you want without any of them, that would be an even better way to go - unless your content truly is tabular data, like a restaurant menu or flight schedule.

[Skinnybobb]

Cheers John,

I've used the DIV option and placed a table inside that. (Lots of columns of dates).



<div class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc1')" />Turn Onto Management (TOM)</div>
<div id="sc1" class="switchcontent">
<table width="100%" bordercolor="#C0C0C0" border="1" cellspacing="0">
<tr>
<td width="20%" style="border-style: dotted; border-width: 1"><b>Course</b></td>
<td width="9%" style="border-style: dotted; border-width: 1"><b>Duration</b></td>
<td width="7%" style="border-style: dotted; border-width: 1"><b>Nov</b></td>
<td width="8%" style="border-style: dotted; border-width: 1"><b>Dec</b></td>
<td width="8%" style="border-style: dotted; border-width: 1"><b>Jan</b></td>
<td width="8%" style="border-style: dotted; border-width: 1"><b>Feb</b></td>
<td width="8%" style="border-style: dotted; border-width: 1"><b>Mar</b></td>
<td width="8%" style="border-style: dotted; border-width: 1"><b>Apr</b></td>
<td width="8%" style="border-style: dotted; border-width: 1"><b>May</b></td>
<td width="8%" style="border-style: dotted; border-width: 1"><b>Jun</b></td>
<td width="8%" style="border-style: dotted; border-width: 1"><b>Jul</b></td>
</tr>
</table>


Ta very much
SB