Javascript collapse delayed functionality
<p>I want to achieve the functionality of replacing old collapsed content with another one when pushing a button. When I try doing it using bootstrap button <code>data-toggle</code> and <code>data-taget</code> attributes and in addition using javascript I get a delayed hide and show functionality.</p>

<p>My example code:   </p>

<pre><code>&lt;table class="table"&gt;&lt;thead class="thead-inverse"&gt;&lt;tr&gt;&lt;th&gt;Column1&lt;/th&gt;&lt;th&gt;Column2&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;

&lt;tr&gt;&lt;td&gt;&lt;button type="button" class="btn btn-danger text-center" data-toggle="collapse" href="#contentID" id="errorButton"&gt;&lt;/span&gt;SwapContent&lt;/button&gt;&lt;/td&gt;&lt;td&gt;&lt;button type="button" class="btn btn-info" data-toggle="collapse" data-target=".contentClass" id="noteButton"&gt;SwapContent2&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;

&lt;script type="text/javascript"&gt;
  $('#errorButton').on('click', function(event) {
    $("#contentID.collapse.danger").collapse("show");
    $(".collapse.info.contentClass, .collapse.warning.contentClass").collapse("hide");
  });
    $('#noteButton').on('click', function(event) {
    $("#contentID.collapse.danger").collapse("hide");
    $(".collapse.info.contentClass, .collapse.warning.contentClass").collapse("show");
  });
&lt;/script&gt;

&lt;tr class="collapse info contentClass"&gt;&lt;td colspan="2" style="padding: 0px; padding-left: 5px"&gt;InfoTest&amp;emsp;&amp;emsp;InfoContent&lt;/td&gt;&lt;/tr&gt;
&lt;tr class="collapse info contentClass"&gt;&lt;td colspan="2" style="padding: 0px; padding-left: 5px"&gt;InfoTest&amp;emsp;&amp;emsp;InfoContent&lt;/td&gt;&lt;/tr&gt;
&lt;tr class="collapse warning contentClass"&gt;&lt;td colspan="2" style="padding: 0px; padding-left: 5px"&gt;Test&amp;emsp;&amp;emsp;Content&lt;/td&gt;&lt;/tr&gt;
&lt;tr class="collapse warning contentClass"&gt;&lt;td colspan="2" style="padding: 0px; padding-left: 5px"&gt;Test&amp;emsp;&amp;emsp;Content&lt;/td&gt;&lt;/tr&gt;
&lt;tr class="collapse warning contentClass"&gt;&lt;td colspan="2" style="padding: 0px; padding-left: 5px"&gt;Test&amp;emsp;&amp;emsp;Content&lt;/td&gt;&lt;/tr&gt;
&lt;tr class="collapse warning contentClass"&gt;&lt;td colspan="2" style="padding: 0px; padding-left: 5px"&gt;Test&amp;emsp;&amp;emsp;Content&lt;/td&gt;&lt;/tr&gt;
&lt;tr class="collapse warning contentClass"&gt;&lt;td colspan="2" style="padding: 0px; padding-left: 5px"&gt;Test&amp;emsp;&amp;emsp;Content&lt;/td&gt;&lt;/tr&gt;
&lt;tr class="collapse info contentClass"&gt;&lt;td colspan="2" style="padding: 0px; padding-left: 5px"&gt;InfoTest&amp;emsp;&amp;emsp;InfoContent&lt;/td&gt;&lt;/tr&gt;
&lt;tr class="collapse info contentClass"&gt;&lt;td colspan="2" style="padding: 0px; padding-left: 5px"&gt;InfoTest&amp;emsp;&amp;emsp;InfoContent&lt;/td&gt;&lt;/tr&gt;

&lt;tr id="contentID" class="collapse danger"&gt;&lt;td colspan="2"&gt;&lt;table class ="table"&gt;&lt;thead class="thead-default"&gt;&lt;tr&gt;&lt;th&gt;Column1&lt;/th&gt;&lt;th&gt;Column2&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
&lt;tr&gt;&lt;td&gt;Column1Content&lt;/td&gt;&lt;td&gt;Column2Content&lt;/tr&gt;

&lt;/table&gt;
</code></pre>

<p>Bootply execution of the same code: <a href="http://www.bootply.com/fv4WsHXXlm" rel="nofollow">http://www.bootply.com/fv4WsHXXlm</a> to show that when pushing between the buttons the old content stays on the screen for a while before it gets hidden, I would like it to happen simultaneously.</p>