Switch Content Script II

[Tom_K]

1) Script Title: Switch Content Script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...chcontent2.htm

3) Describe problem: The problem occurs when I use this script within a table. When a certain row is collapsed, it is still visible. A few pixels are still visible and I cannot find a way to make it completely invisible when it is collapsed. I managed to find a solution for IE with tbody tags but then Firefox messes everything up.

Please help.

This is the code I'm trying to fix.

<table width="748" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#000000">
	<tr align="center" bgcolor="#FFFFFF">
		<td><span id="first-title"></span>&nbsp;data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
	<tr align="center" bgcolor="#FFFFCC">
		<td colspan="7">
		<div id="first" class="expand">
			<table width="100%" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td>additional data</td>
					<td>additional data</td>
					<td>additional data</td>
				</tr>
			</table>
		</div>
		</td>
	</tr>
	<tr align="center" bgcolor="#FFFFFF">
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
</table>
<script type="text/javascript">

var faqtable=new switchicon("expand", "div") //Limit scanning of switch contents to just "div" elements
faqtable.setHeader('<img src="../images/minus.gif" valign="middle">', '<img src="../images/plus.gif" valign="middle">') //Set header HTML
faqtable.collapsePrevious(false) //Allow more than 1 content to be open simultanously
faqtable.setPersist(false) //Enable persistence to remember last switch content states for 7 days
faqtable.init()

</script>

[ddadmin]

Is that the entire relevant HTML? Collapsing table rows/cells usually requires some changes to the script due to the way tables are rendered. If you have a URL to the problem page, that would be best.

[Tom_K]

I gave the code as a simplified example.

The problematic page is located at http://www.bmwslo.com/podatki/N50/N50b.php

[ddadmin]

The extra gap when the table is collapsed is due to the <td> surrounding the content I believe. Using your code snippet posted above:

		<td colspan="7">
		<div id="first" class="expand">
			<table width="100%" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td>additional data</td>
					<td>additional data</td>
					<td>additional data</td>
				</tr>
			</table>
		</div>
		</td>

To get rid of it, one way is to not collapse the DIV, but the parent <td> instead. Try the below changes:

Inside switchcontent.js, edit the following code chunk:

switchcontent.prototype.toggledisplay=function(header){
	var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content for this header
	if (innercontent.parentNode.style.display!="none")

The code in red is the modified line from the default. Then, inside switchicon.js:

switchicon.prototype.contractcontent=function(header){
	var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content for this header
	innercontent.parentNode.style.display="none"

and:

switchicon.prototype.expandcontent=function(header){
	var innercontent=document.getElementById(header.id.replace("-title", ""))
	innercontent.parentNode.style.display=""

[Tom_K]

Awesome. Thank you so much! This site is amazing. Is it possible to donate money to DD to show my thanks?