[Solved] Show hidden table cells below visible cells

by


You need to manipulate the table structure a bit more than just toggling a class.

Below is an example to create a new row for each .hideable found.
In those new rows, append a .clone() of them one by one in the reverse order…
And then, append the new row after the row where user clicked.

Code is well commented step by step.

function Qwe() {
  $('table tr td').each(function () {
    if ($(this).is(':hidden') && !$(this).hasClass('clickMe')) {
      $(this).addClass('hideable'); //I also have some css for this class aka I have a reason for giving it class
    }
  });
}

$(document).ready(function () {
  Qwe();
  
  $('td.clickMe').click(function () {
    
    //Remove all previously appended cells.
    $(".hideable-show").parent().remove();
    
    var hiddenCells = $(this).parent().find('.hideable');
    
    // Loop trought all hideable found in the reverse order
    for(i=hiddenCells.length-1;i>=0;i--){
      // Create a new row
      var newRow = $("<tr>").append(hiddenCells.eq(i).clone().addClass('hideable-show'));
      // Append the new row after this row
      $(this).parent("tr").after(newRow);
    }
  });
  
  $(window).resize(function () {
    Qwe();
  });
});
/*all of this is inside @media(max-widht:360px)*/
thead td {
  display: none;
}
thead td:first-child, thead td:nth-child(2) {
  display: table-cell;
}
tr td {
  display: none;
}
tr td:first-child, tr td:nth-child(2), .clickMe {
  display: table-cell;
}
table tr td.hideable-show {
  display: table-cell;        /* Has to be a cell */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<thead>
  <td>cell1</td>
  <td>cell2</td>
  <td>cell3</td>
  <td>cell4</td>
  <td>cell5</td>
  <td>cell6</td>
</thead>
<tr>
  <td>asd</td>
  <td>asd</td>
  <td><span class="hiddenName">cell3-</span>asd</td>
  <td><span class="hiddenName">cell4-</span>asd</td>
  <td><span class="hiddenName">cell5-</span>asd</td>
  <td><span class="hiddenName">cell6-</span>asd</td>
  <td class="clickMe">details</td>
</tr>
<tr>
  <td>asd</td>
  <td>asd</td>
  <td><span class="hiddenName">cell3-</span>asd</td>
  <td><span class="hiddenName">cell4-</span>asd</td>
  <td><span class="hiddenName">cell5-</span>asd</td>
  <td><span class="hiddenName">cell6-</span>asd</td>
  <td class="clickMe">details</td>
</tr>
</table>

</body>

1

solved Show hidden table cells below visible cells