Bootstrap Collapse animation does not work

Question

Good evening, I would like some help... I’m trying to use the Boostrap 3.3 Collapse in a row of a table, the code is like this:

<table>
    <thead>
        <tr>
            <th>header</th>
            <th>header</th>
            <th>header</th>
            <th>header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>                               
                <a class="btn btn-xs btn-block btn-default" data-toggle="collapse" data-target=".child" aria-expanded="false" aria-controls="collapseExample">
                    <i class="fa fa-caret-right" aria-hidden="true"></i>
                </a>
            </td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="collapse child">
            <td>
            </td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>

the problem is that the animation of Collapse is not working, someone knows how to solve?

Answer 1

I tested your code here and it worked perfectly. You probably made some changes to css code with the property !Important and is affecting the operation of your bootstrap.

I suggest commenting on all your tags and leaving only the bootstrap to test. If you want you can even get a code ready like this that I will leave and you will see that will not work well in your project because of what I said.

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
     Lorem ipsum dolor text....
</div>

UPDATING RESPONSE

Do a function with javascript or in case I used Jquery so

<script type="text/javascript">
    function mostra_esconde(){
        if($('#linha').is(":visible")){
            $('#linha').hide('slow');
            //ou se quiser ficar mais lento ainda 
            //$('#linha').hide(4000); //para 4 segundos por exemplo  
        }else{
            $('#linha').show('slow');
            //ou se quiser ficar mais lento ainda 
            //$('#linha').show(4000); //para 4 segundos por exemplo  
        }                
    }      
</script>

and the button goes like this

<a href="javascript:teste()" class="btn btn-xs btn-block btn-default" >
    <i class="fa fa-caret-right" aria-hidden="true"></i>
</a>

and finally, what you want to hide and appear is like this with None display

<tr id="linha" style="display: none">                    
    <td></td>
    <td>data</td>
    <td>data</td>
    <td>data</td>                   
</tr>