This week's book giveaway is in the OCPJP forum.
We're giving away four copies of OCA/OCP Java SE 7 Programmer I & II Study Guide and have Kathy Sierra & Bert Bates on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes How  to expand and collapse multiple rows in table using Java script Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCA/OCP Java SE 7 Programmer I & II Study Guide this week in the OCPJP forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How  to expand and collapse multiple rows in table using Java script" Watch "How  to expand and collapse multiple rows in table using Java script" New topic
Author

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

Nilesh Raje
Ranch Hand

Joined: Aug 02, 2005
Posts: 153
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


Thanks and Regards,<br />Nilesh<br />SCJP 1.4, SCWCD 1.4
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61456
    
  67

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.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Karthik Srikanti
Greenhorn

Joined: Sep 20, 2006
Posts: 11
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';


{ SCJP, SCWCD, SCBCD, OCA (DBA) }
Andreanes Yosef Vanderlee
Greenhorn

Joined: Mar 30, 2007
Posts: 12
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

 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to expand and collapse multiple rows in table using Java script