Accordion Table with Bootstrap issue

Question

I have bootstrap table with accordion

I need hide by default second row

But when I clicked the table moves

How to make the animation and opening smooth, without shifting?

<table class="table table-hover">
<tbody>
    <tr data-bs-toggle="collapse" href="#collapse">
        <td>Info</td>
        <td>Some more Info</td>
        <td>And some Info</td>
    </tr>
    <tr id="collapse" class="collapse">
        <td>Hidden by default</td>
        <td>Hidden by default</td>
        <td>Hidden by default</td>
    </tr>
</tbody>

https://jsfiddle.net/ejdy462h/2/

Answer 1

I purpose to you to use jQuery fadeToggle() and selector attribute

If you want to use this, you just need to remove data-bs-toggle="collapse" from your first tr

$("tr[href$='#collapse']").click(function() {
  $(this).next("tr#collapse:first").fadeToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
<tbody>
    <tr href="#collapse">
        <td>Info</td>
        <td>Some more Info</td>
        <td>And some Info</td>
    </tr>
    <tr id="collapse" class="collapse">
        <td>Hidden by default</td>
        <td>Hidden by default</td>
        <td>Hidden by default</td>
    </tr>
</tbody>