title: How to avoid slow collapse when using bootstrap collapse and div in a table
body: <p>I use bootstrap and jquery to build collapsible elements. When using them outside a HTML table, it works fine, however when I use it inside a table, there is a noticable short time until the item collapses, expanding is fine as well. </p>
  
  <p>See this <a href="https://jsfiddle.net/centic/k2od0ntj/" rel="noreferrer" title="JSFiddler Snippet">JSFiddle Snippet</a></p>
  
  <p>Any clue? The full HTML code of a sample page is as follows</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;a href="#" data-toggle="collapse" data-target="#querybox"&gt;normal collapse&lt;/a&gt;
          &lt;div id="querybox" class="collapse"&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
              some long text&lt;br/&gt;
          &lt;/div&gt;
          &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;a href="#" data-toggle="collapse" data-target="#contentholder1"&gt;slow collapse&lt;/a&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id="contentholder1" class="collapse"&gt;
              &lt;td&gt;234&lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                      sometext&lt;br/&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;                                                                           
          &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>