expande/collapse 1

[Chacalinc]

Hi,

I have a table:

<table>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
</tr>
</table>

I want to collapse all rows if I click on col 1 and expand all rows if I click on col2.

Can I do that? how?

thanks in advance...

 

[dtqbterror]

It is possible to do this using the <DIV> tag and some java script changing the display style of the div from block to none depending on if you want to display the rows or not.

 

[Chacalinc]

Looking around I found the same that you are talking, but I don't know how to do it (sorry, my knowlegment in javascript are quite poor).

ok, let's try with the following:

<div id="to_col" name="table1">
<table>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
</tr>
</table>
</div>

<p onclick="hide_it">Hide it!</p>
<p onclick="show_it">Show it!</p>
[code]

If it does not bother you... what should be the javascript? could you give me an example?

Thanks a lot!

 

[Chacalinc]

oops, last two lines should be:

<p onclick="hide_it()">Hide it!</p>
<p onclick="show_it()">Show it!</p>

 

[dtqbterror]

<p onclick="handleClick("hide_it")>Hide it!</p>
<p onclick="handleClick("show_it")>Show it!</p>


<script LANGUAGE="JavaScript">
function handleClick(sWhich)
{
if(sWhich=='hide_it')
{
document.getElementById("to_col").style.display = "none";
}
else if(sWhich=='show_it')
{
document.getElementById("to_col").style.display = "block";
{
else
{
//which ever you want as default.
}
}
</script>

Hope this helpse

 

[Chacalinc]

Thanks!! it works... I just made a couple of changes to make it works:

<script LANGUAGE="JavaScript">

function handleClick(sWhich) {
if(sWhich=='hide_it') {
document.getElementById("to_col").style.display = "none";
}
else {
document.getElementById("to_col").style.display = "block";
{
}
}
}
</script>

just 2 questions:

1. Why do I must put the last '}' chars? It' does not make sense for me... mozilla say nothing if they don't exist, bet the script does not work and IE appear the error dialog with the message "expecting '} '"

2. If you have several tables (example 3) and you want collapse/expand the 3 with different options, can you use the same div and different names?
example:
<div id="to_col" name="table1">
..</div>
<div id="to_col" name="table3">
..</div>
<div id="to_col" name="table2">
..</div>

Thanks again! ( a star for you).

 

[Chacalinc]

Ok, I get the answer to the first question:
}
else {
document.getElementById("to_col").style.display = "block";
{
}
}
}

should be:

}
else {
document.getElementById("to_col").style.display = "block";
}
}

but 2nd question?

 

[Vragabond]

You should not use more than one element in the document with the same id. ids are used as unique identifiers of the element in a document. what you could do is put an id and append a number to it: <div id="to_col_1"></div> and in the javascript make a loop that would run through ids.

 

[dtqbterror]

Glad this worked for you thanks for the Stars.

 

[Chacalinc]

Thanks Vragabond, U R right, I must use differents IDs.

Finally, I leave the script as follow:

<script>

function handleClick(Obj,imagen)  {
	if(document.getElementById(Obj).style.display=='none') {
		document.getElementById(Obj).style.display = "";
		document.getElementById(imagen).src="menu/fo_p.gif";
		
	}
  	else {
  		document.getElementById(Obj).style.display = "none";
  		document.getElementById(imagen).src="menu/fc_p.gif";
  		
  	}
}

</script>

With this code i can have:
<img src="menu/fo_p.gif" id="gif1" onclick="handleClick('to_col1','gif1')" align="left">

<img src="menu/fo_p.gif" id="gif2" onclick="handleClick('to_col2','gif2')">

IDs gif1 and gif2 are "plus" and "minus" in gif, so if the *dialog* is closed, a plus gif appears, and when is open a minus appears.

This born because I didn't know how to do it when I have several tables to expand/collapse independentantly, si I though in ask for the style.display status.. and that's the code

Thanks a lot for your help!! I was really lost, but with your code I got it.

Cheers.