collapse animation bootstrap does not work

Navigation
-1

Good night, I would like a help ... I am trying to use the collapse of boostrap 3.3 in a row of a table, the code looks 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 collapse animation is not working, does anyone know how to solve it?

    
asked by anonymous 06.09.2017 / 00:52

1 answer

1

I tested your code here and it worked perfect. You probably should have made some changes to css codes with the ! Important property and it is affecting how your bootstrap works.

I suggest commenting on all your tags and leaving only the bootstrap to test. If you want you can even get a ready code like this that I will leave and will see that it will not work right 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 ANSWER

Make 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 looks 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>

Finally, what you're hiding and appearing looks like this with display none 

<tr id="linha" style="display: none">                    
    <td></td>
    <td>data</td>
    <td>data</td>
    <td>data</td>                   
</tr>
    
06.09.2017 / 19:25
Hiding brother menu Remove border from page [closed]