Bootstrap Collapse animation does not work

Asked

Viewed 623 times

-1

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?

html css css3 bootstrap-3 bootstrap

1 answer

2

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>

  • So collpase used with div, as in your example, works normally, but in table the Animation does not work at all. (tested take out all my modifications). I still can’t fix it :(

  • But you tried with another code ready and it worked normal? If this happened, then just one thing comes to mind. You must have another html element with the same id, so it doesn’t work there with you and here with me is normal.

  • So, it works, it closes and I opened Collapse, the problem is that the animation doesn’t work, in the div the normal animation works and in the table doesn’t, and I’ve tried in another table and another page and the animation didn’t work. I can’t say what it is, I thought it was from the tables, that Collapse didn’t work with them...

  • Dude, I didn’t really read what you wrote, now I do. I researched here and I did not find answer for boostrap 3.3, there seems to be something for 4, HOWEVER, I will edit the answer to do it in hand, after all it does not need to be all with bootstrap right.

  • It even works but I don’t want the fade, I’d really like the slideToggle (which also doesn’t work doing in hand kk). I did a search and saw that with the table does not work right even, something with the height of the line...

Browser other questions tagged html css css3 bootstrap-3 bootstrap

You are not signed in. Login or sign up in order to post.