0

I have a table in React (JSX), and I want to toggle some of the rows (even multiple) by clicking on a row above them.

It's easy to just disappear them, but how can I do it smoothly (slideDown and slideUp)?

Min-height doesn't seem to be working and I also cannot wrap entire tr into a div since it's in React. Thanks.

  <table>
    <tbody>
      <tr>
        <td>main row - onclick toggle the rows under</td>
        <td></td>
      </tr>           
      <tr>
          <td>show only if clicked on the row above (smoothly)</td>
          <td></td>
        </tr>
      <tr>
        <td>show only if clicked on the first row (smoothly)</td>
        <td></td>
      </tr>
    </tbody>
  </table>
user3696212
  • 3,381
  • 5
  • 18
  • 31
  • It seems that [animations are not supported on table rows](http://stackoverflow.com/questions/467336/how-to-use-slidedown-or-show-function-on-a-table-row). – Robiseb Oct 03 '16 at 22:31
  • Yes I know this, but for sure somebody had to find some clever workaround. – user3696212 Oct 03 '16 at 22:40
  • 1
    I had the similar issue and I ended up using div's instead of table. – iurii Oct 03 '16 at 22:43

1 Answers1

0

This should help you!

Use state to track the click and use the css to animate the height change.

Check this fiddle:

https://jsfiddle.net/pranesh_ravi/x7q88qpe/1/

Pranesh Ravi
  • 18,642
  • 9
  • 46
  • 70