How to expand and collapse multiple rows in table using Java script

Hi Friends,

I am not able to collapse and expand multiple rows. Can some one explain me with example?

I want to create a table in following way.

1)when i click the heading of the first row
The remaining 2 sub rows should hide(Can we put this subrows in the table and hide the entire table of 2 subrows?)
2) when i click the heading of the next row
the remaining 4 subrows should hide(Can we put this subrows in the table and hide the entire table of 4 subrows?)

3) then when i click the heading of the next row
then remaining 2 subrows should hide(Can we put this subrows in the table and hide the entire table of 2 subrows?)

4) then when i click the heading of the next row
then remaining 2 subrows should hide(Can we put this subrows in the table and hide the entire table of 2 subrows?)

..!
It some thing like this

+Title 1
+Title 2
+Title 3
+Title 4

Now on clicking Title 1 i should see the following
- Title 1
--Sub Row1
--Sub Row 2

now on clicking Title 2 i should see the following
- Title 2
--Sub Row 1
--Sub Row 2
--Sub Row 3
--Sub Row 4

now on clicking Title 3 i should see the following
- Title 3
--Sub Row 1
--Sub Row 2

now on clicking Title 4 i should see the following
- Title 4
--Sub Row 1
--Sub Row 2

Thanks a ton..!
Nilesh

Please take the time to choose the correct forum for your posts. This forum is for questions on JSP.

This post has been moved to a more appropriate forum.

Try putting them in divs or spans, then use a javascript function to hide and show as required. You can use something like:

document.getElementById('div1').style.display='block';
document.getElementById('div2').style.display='none';

maybe you can look at sample code below.. It just a simple method.. but basically.. it'll work like this.. (change onClicked with onclick)

--
Andre