JQuery.slideToggle is not smooth on the table

I have an internal table inside an external table that contains data from an external. I decided to hide it and show it only when the user clicks the "Expand" button. I did this with a jQuery slideToggle function like this

$(document).ready(function() {
  $('.partTableContent').hide();
  $('.expandButton').click(function() {
    // .parent() selects the A tag, .next() selects the P tag
    $(this).closest('tr').next(' tr').find('table').slideToggle(200);
  });
}); 

Html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="partsTable">

  <tr>

    <td class="sideForPartsTable" width="5%">
      <button class="expandButton">Expand button</button>
    </td>
    <td class="sideForPartsTable">Title + sum1 + sum2</td>
    <td class="sideForPartsTable" width="5%">edit</td>
    <td class="sideForPartsTable" width="5%">remove</td>

  </tr>

  <tr>
    <td>
      <table class="partTableContent">
        <tr>
          <td> Test1 </td>
        </tr>
        <tr>
          <td> Test2 </td>
        </tr>
      </table>
    </td>
  </tr>

</table>

But the animation of this action leaves much to be desired. Hidden content pops up instantly without any smooth animation. I tried using "slow" inside .slideToggle and changing the width of the table. But that did not work. Any ideas?

+4
source share
1 answer

Put your inner table inside <div>and give the class this div class="partTableContent". See if the following code works:

<table class="partsTable">

    <tr>

        <td class="sideForPartsTable" width="5%">
            <button class="expandButton">Expand button</button>
        </td>
        <td class="sideForPartsTable">Title + sum1 + sum2</td>
        <td class="sideForPartsTable" width="5%">edit</td>
        <td class="sideForPartsTable" width="5%">remove</td>

    </tr>

    <tr>
        <td>
            <div class="partTableContent">
                <table>
                    <tr>
                        <td> Test1 </td>
                    </tr>
                    <tr>
                        <td> Test2 </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>

</table>

Then change

$(this).closest('tr').next(' tr').find('table').slideToggle(200); 

to

$('.partTableContent').slideToggle(200);

Working script

+1
source

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


All Articles