如何在JavaScript中显示具有滑行效果的无显示行？

Question

i have a table with number of rows that some of rows are hidden and only visisble when "show" button clicked. my question is how can i display block my row with effect slide down? Here is My snippet :

 function toggleRow(e){ var subRow = e.parentNode.parentNode.nextElementSibling; subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none'; } 

 .subRow { background-color: #CFCFCF; display:none; } 

 <table style="width:50%" border="1"> <caption>Test Table</caption> <thead> <tr align="center" class="parentRow"> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr class="parentRow"> <td><a href="JavaScript:Void(0);" onclick="toggleRow(this);">SHOW</a></td> <td>test cell</td> <td>test cell</td> <td>test cell</td> <td>test cell</td> </tr> <tr class="subRow"> <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td> </tr> <tr class="parentRow"> <td><a href="JavaScript:Void(0);" onclick="toggleRow(this);">SHOW</a></td> <td>test cell</td> <td>test cell</td> <td>test cell</td> <td>test cell</td> </tr> <tr class="subRow"> <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td> </tr> </tbody> </table> 

Answer 1

I recommend to toggle a class instead.

I also changed href="JavaScript:Void(0);" to href="#" to avoid script error.

As you can't animate a table-row I added the animation to an extra div , here used with max-height

To be noted, animation of height is difficult and the below trick, where I use max-height , the value need to be set so it always is bigger than the content. If this is not doable, a script is needed to grab the content height prior to kicking of the transition

 function toggleRow(e){ var subRow = e.parentNode.parentNode.nextElementSibling; subRow.classList.toggle('RowShow'); return false; } 

 .subRow td { background-color: #CFCFCF; padding: 0; border: 0; } .subRow div { max-height: 0; transition: max-height 0.5s; overflow: hidden; } .subRow.RowShow div { max-height: 100px; transition: max-height 1s; } 

 <table style="width:50%" border="1"> <caption>Test Table</caption> <thead> <tr align="center" class="parentRow"> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr class="parentRow"> <td><a href="#" onclick="return toggleRow(this);">SHOW</a></td> <td>test cell</td> <td>test cell</td> <td>test cell</td> <td>test cell</td> </tr> <tr class="subRow"> <td colspan="5"><div><p>Lorem ipsum dolor sit amet...</p></div></td> </tr> <tr class="parentRow"> <td><a href="#" onclick="return toggleRow(this);">SHOW</a></td> <td>test cell</td> <td>test cell</td> <td>test cell</td> <td>test cell</td> </tr> <tr class="subRow"> <td colspan="5"><div><p>Lorem ipsum dolor sit amet...</p></div></td> </tr> </tbody> </table> 

Answer 2

Void should be lowercase but I use preventDefault instead

You are using tables so there is an issue animating the table row.

slideToggle in table row

I have implemented that fix

 $(function() { $(".show").on("click", function(e) { e.preventDefault(); $(this).closest("tr").next().find(".content").slideToggle(); }); }); 

 .subRow { padding:0; background-color: #CFCFCF; } .content { background-color: #CFCFCF; display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table style="width:50%" border="1"> <caption>Test Table</caption> <thead> <tr align="center" class="parentRow"> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tbody> <tr class="parentRow"> <td><a href="#" class="show">SHOW</a> </td> <td>test cell</td> <td>test cell</td> <td>test cell</td> <td>test cell</td> </tr> <tr class="subRow"> <td colspan="5"> <div class="content"><p>Lorem ipsum dolor sit amet...</p></div> </td> </tr> <tr class="parentRow"> <td><a href="#" class="show">SHOW</a> </td> <td>test cell</td> <td>test cell</td> <td>test cell</td> <td>test cell</td> </tr> <tr class="subRow"> <td colspan="5"> <div class="content"><p>Lorem ipsum dolor sit amet...</p></div> </td> </tr> </tbody> </table>