How To Show a Display None Row With Slide Down Effect in 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>

Asons · Answer 1 · 2016-12-11T08:58:06.730

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>

You likely want to `return toggleRow()` and return false in the function. In most browsers it will not matter, but some will offload animations and such — mplungjan, Dec 11 '16 at 08:34

score 0 · Accepted Answer · edited May 23 '17 at 12:24

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>

This code only run one time and can't slide up when i click on again. — , Dec 11 '16 at 08:27
There is an issue with the 0 height subrow. And I misunderstood what the number in the slideToggle means in that case. Please see update — mplungjan, Dec 11 '16 at 08:28

How To Show a Display None Row With Slide Down Effect in Javascript?

2 Answers2