How to smoothly hide a row in a table using jQuery?

Question

JavaScript

Good afternoon.
Help write a script that will smoothly collapse/expand rows in a table when a link is clicked
Did the following: jsfiddle.net/pbtr2pfe
BUT:

1. The table does not collapse/unfold smoothly. There is a delay.
   
2. When expanding - you need to change the link to "Collapse", when folding - "Expand"
   

Answer 1

I suggest replacing slideToggle with toggle.

Answer 2

The fact is that some effects do not work with tables. Lines can be removed, added, hidden, but not all animations work.
If tables are necessary there is a crutch. Hide Div inside which is one table row.
but in this case the width of the lines must be hard-coded, which is not very convenient.
the second option is Divs. Make markup on them, slightly increase CSS if libraries like Bootstrap and the like are not used (they already have such markup, you can borrow)

Answer 3

You can do this through styles, well, minus if there are frames
jsfiddle.net/pbtr2pfe/2