CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Jackstick
Jackstick

Reputation: 89

Javascript collapse delayed functionality

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 data-toggle and data-taget attributes and in addition using javascript I get a delayed hide and show functionality.

My example code: 

<table class="table"><thead class="thead-inverse"><tr><th>Column1</th><th>Column2</th></tr></thead>

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

<script type="text/javascript">
  $('#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");
  });
</script>

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

<tr id="contentID" class="collapse danger"><td colspan="2"><table class ="table"><thead class="thead-default"><tr><th>Column1</th><th>Column2</th></tr></thead>
<tr><td>Column1Content</td><td>Column2Content</tr>

</table>

Bootply execution of the same code: http://www.bootply.com/fv4WsHXXlm 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.

Upvotes: 0

Views: 69

Answers (1)

Jackstick
Jackstick

Reputation: 89

Already found a solution. The trick was to use jQuery hide() and show() instead of collapse("hide") and collapse("show").

Upvotes: 1

Related Questions