Getting extra row before div - expand collapse code in ASP

Sorry Sage, it did not work.

ah, I see what you mean... Sorry, didn't look at your code closely enough.

Try this: assign the onclick to the TR and not an HREF between the TR & TD... like this:

<TABLE>
<tr onClick="toggleDisplay('test')"><td colspan=2>
    <div id='test'>
      <table>
       <tr><td>test1</td><td>test2</td></tr>
      </table>
    </div>
</td></tr>
</TABLE>
 
 
 
 
<script>
function toggleDisplay(id) {
  var obj = document.getElementById(id);    
  obj.style.display=(obj.style.display=="none")? "":"none"; 
  return false;
}
 
</script>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

I still have the same problem.
In my code snippet
line#2 <TR> is always visible. It has the toggle link/button. By clicking on it, user should be able to see TR in line3.
I tried removing <tr> in line 3 before <div>. Then toggle code does not work. Seems to me that <div> should be in a <TR> if it is embedded inside <table>

I think you need to assign the ID to the TR, not the DIV.

Like this:

<TABLE>
<tr onClick="toggleDisplay('test')"><td colspan=2>
hide TR</td></tr>
<tr ID="test"><td colspan=2>
    <div>
      <table>
       <tr><td>test1</td><td>test2</td></tr>
      </table>
    </div>
</td></tr>
</TABLE>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

Before expand/collapse code this is how my code is:
<TABLE>
<TR><td>test1</td><td>test2</td></tr>
<tr><td>test3</td><td>test4</td></tr>
<tr><td>test5</td><td>test6</td></tr>
</TABLE>

The requirement is: When user toggles on row1 then only I need to show last two rows.
Then I started using div tag concept. Is there any other solution to achieve this

like this:

<TABLE border="1">
<tr onClick="toggleDisplay('test');toggleDisplay('test2');"><td colspan=2>
hide TR</td></tr>
<tr ID="test"><td colspan=2>
    <div>
      <table>
       <tr><td>test1</td><td>test2</td></tr>
      </table>
    </div>
</td></tr>
<tr ID="test2"><td colspan=2>
    <div>
      <table>
       <tr><td>test1</td><td>test2</td></tr>
      </table>
    </div>
</td></tr>
</TABLE>

how do I show/hide the <TR>

in my example, you click the top row to hide or show the bottom 2 rows. Note that clicking on the text in the top row may not do anything... In which case, consider also using the onclick event for the text, too, to toggle the show/hide.

Does my example do what you need it to?

Right now I am using the idea of hiding/showing TR instead of div.

In your code snippet at line2
<tr onClick="toggleDisplay('test');toggleDisplay('test2');"><td colspan=2>
At this stage I do not know how many rows I have later. So I do not know about 'test' and 'test2' names

I have written javascript method. I have 2721 TR rows in one sample. Since I am using for loop , upon each toggle click it is taking a minute to process. Is there an easier way to fix this.

<TABLE border="1">
function toggleDisplay('testRow') {  
var trs = document.getElementsByTagName('TR');
var trsId
//alert(trs.length);//2721
 for(var i=0; i<trs.length; i++)
 {
   if (trs[i].id!="" && trs[i].id!="undefined") {
     trsId = trs[i].id;
   }	
   if (trsId.indexOf(idTest)!=-1) {         
	var obj = document.getElementById(trsId);  
	obj.style.display=(obj.style.display=="none")? "":"none"; 
   }
} 
}
return false;
 
	
}
</script>   

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

That's a lot of rows. Do you have to have your toggle control in one of the rows? Alternatives would include:

1. placing the toggle control outside the table that has all those rows, then hiding the table rather than individual rows.

2. keeping all rows that are to be hidden in their own table, then hiding that.

3. if your toggle must appear in a row, consider having two or more tables - one table for the toggle control row and other rows that are not to be hidden, and one table for only those rows to be hidden.

looping through a large number of anything and then taking some sort of action, can have a negative affect on performance, while acting on one single object, like a table with a bunch of rows, should be much faster.

I could resolve the issues using <tbody> instead of <div>. Please see my code snippet

<table>
<tr><td><a href=# onClick=toggleDisplay('Always1')>Always1</a></td></tr>
<tbody id='Always1'>
      <tr><td>Toggle1</td></tr>
      <tr><td>Toggle2</td></tr>
</tbody>
<tr><td><a href=# onClick=toggleDisplay('Always2')>Always2</a></td></tr>
<tbody id='Always2'>
      <tr><td>Toggle3</td></tr>
      <tr><td>Toggle4</td></tr>
</tbody>
<tr><td>Always3</td></tr>
</table>
 
Javascript method
------------------------
function toggleDisplay(idTest) {
	if (idTest!="" && idTest!="undefined") {			
		var obj = document.getElementById(idTest);  
		if (obj!=null) {
			obj.style.display=(obj.style.display=="none")? "":"none"; 
		}
	}
	return false;
}

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

Not sure if that's valid html, having the tbody tag in that position... You can check by running it through the markup validator at w3.org:
http://www.w3.org/QA/Tools/#validators

Thanks for the link. I have used the markup validator and the Cleaned-up Source Listing with "Tidy" gave the code similar to above. No complaints about the positioning of tbody.

<table>
<tr><td><a href="#" onclick="toggleDisplay('Always1')">Always1</a></td></tr>
<tbody id='Always1'>
	<tr><td>Toggle1</td></tr>
	<tr><td>Toggle2</td></tr>
</tbody>
<tr><td><a href="#" onclick="toggleDisplay('Always2')">Always2</a></td></tr>
<tbody id='Always2'>
	<tr><td>Toggle3</td></tr>
	<tr><td>Toggle4</td></tr>
</tbody>
<tr><td>Always3</td></tr>
</table>
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13: