Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Cloud/Virtualization forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

How to expand and collapse multiple rows in table using JavaScript

 
Nilesh Raje
Ranch Hand
Posts: 153
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64631
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Karthik Srikanti
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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';
 
Andreanes Yosef Vanderlee
Greenhorn
Posts: 12
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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

 
Phil Lee
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi, I just saw this post you posted many years ago. How would you make the rows collapsed by default with the code you provided without using javascript? Thanks
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64631
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Without JavaScript? Not possible.
 
Phil Lee
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Nothing can be done in CSS to bypass using javascript?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64631
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
No. Even though modern CSS some behavioral aspects with transitions and animations, it is not a substitute for script.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic