Make an animation for collapsing <tr> with Bootstrap - html

Question

So, I have a bootstrap table:
<table class="table">
<tr class="content-row" id="content_1">
<td><a id="more_1" class="more" role="button" data-toggle="collapse" href="#additional_row1" aria-expanded="false" aria-controls="collapseExample">More</a>
</td>
</tr>
<tr class="collapse additional-row" id="additional_row1">
<td class="additional-row-td">Content</td>
</tr>
</table>
When I collapse the row, it just appears below the row, where the 'More' link is. But I need the animation to be present. I also tried to add transition to css rule, but it seems it doesn't have any effect. Is there any way to make collapsing with animation?

Answer 1

The answer that was given wasn't actually providing the correct solution. It was a solution, but when you need to keep the tr and td elements this solution is more complete
The fact is that there is no way in bootstrap to animate tr td elements.
What you can do is instead of toggling the tr or td is create a div or span element in which you are going to add all of your content and then there animate the element.
As you can see it looks the same as if you had an actual table
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>
<table class="table">
<tr class="content-row" id="content_1">
<td><a id="more_1" class="more" role="button" data-toggle="collapse" href="#additional_row1" aria-expanded="false" aria-controls="collapseExample">More</a>
</td>
</tr>
<tr>
<td class="additional-row-td">
<div class="collapse additional-row" id="additional_row1">Content</div>
</td>
</tr>
</table>

Answer 2

It seems like bootstraps collapse-animation isn't working with tables.
You could fix this issue by using divs instead, like i did here:
HTML:
<div class="table">
<div class="content-row" id="content_1">
<div><a class="more" id="more_1" role="button" aria-expanded="true" aria-controls="additional_row1" href="#additional_row1" data-toggle="collapse">More</a>
</div>
</div>
<div class="collapse additional-row" id="additional_row1">
<div class="additional-row-td">Content
</div>
</div>
CSS (just style it to look like an table):
.content-row{
padding: 10px 15px;
}
.additional-row-td {
border-top: 1px solid #dddddd;
padding: 10px 15px;
}
Working Example: http://www.bootply.com/iFOT9utPvA#