All geek questions in one place

How to avoid slow collapse when using a bootstrap and div collapse in a table

I use bootstrap and jquery to build dumped elements. When you use them outside the HTML table, it works fine, however, when I use it inside the table, there is a noticeable short time until the element crashes, the extension is also great.

See JSFiddle Snippet

Any clue? The full HTML for the sample page is as follows

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
        <a href="#" data-toggle="collapse" data-target="#querybox">normal collapse</a>
        <div id="querybox" class="collapse">
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
        </div>
        <table>
        <tr>
            <td>
                <a href="#" data-toggle="collapse" data-target="#contentholder1">slow collapse</a>
            </td>
        </tr>
        <tr id="contentholder1" class="collapse">
            <td>234</td>
            <td>
                <div>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                </div>
            </td>
        </tr>                                                                           
        </table>
  </body>
</html>
+4
source share
1 answer

DIV TR. display, , , .

table https://jsfiddle.net/k2od0ntj/1/

? DIV s display, , display .collapsing, .

<div class="div-table">       <!-- <table> -->
    <div class="div-tr">      <!--   <tr> -->
        <div class="div-td">  <!--    <td> -->
            <a data-toggle="collapse" data-target="#contentholder1">slow collapse</a>
        </div>
     </div>
     <div id="contentholder1" class="div-tr collapse">
         <div class="div-tr">

table: https://jsfiddle.net/k2od0ntj/3/

+5

Source: https://habr.com/ru/post/1583940/

More articles:


All Articles