How to add collapse to table rows

Question

I have a table in my page and don't want to show entire table at once. Instead, I'd like to show only 3 rows by default. Then, when a user clicks on the more button, I want to display all rows.

I tried the below code to accomplish that, but had a rendering issue. Is there any possibility to add collapse to table rows in html?

table

<table class="table table-striped">
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>abcde</td>
    </tr>
    <tr>
        <td>2</td>
        <td>bcdef</td>
    </tr>
    <tr>
        <td>3</td>
        <td>cdefg
            <span class="more clickable" data-toggle="collapse" data-target="#remaining-data">more
            </span>
        </td>
    </tr>
    <table class="collapse table table-stripped" id="remaining-data">
         <tr>
             <td>4</td>
             <td>defgh</td>
         </tr>
         <tr>
             <td>5</td>
             <td>efghi</td>  
         </tr>
    </table>
<table>

yes, its working fine but is there any method to solve this in HTML itself, Thankyou Prateik Darji — himabindu, Dec 26 '17 at 12:36
no there is no method to achieve this without using `jQuery` or `CSS` — Prateik Darji, Dec 26 '17 at 12:39

Prateik Darji · Accepted Answer · 2017-12-26T12:38:33.327

I have used nth-child(4) that means it will get 3rd tr and add display: none CSS to every tr after that due to nextAll() now when I click on more button it will toggle the element with fade effect, there is no need to write new table or tbody

$(function(){
    $("table tr:nth-child(4)").nextAll().css("display","none");

    $(".clickable").on("click", function(){
        $("table tr:nth-child(4)").nextAll().fadeToggle();
    })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>abcde</td>
    </tr>
    <tr>
        <td>2</td>
        <td>bcdef</td>
    </tr>
    <tr>
        <td>3</td>
        <td>cdefg
            <span class="more clickable btn btn-sm pull-right btn-link">more
            </span>
        </td>
    </tr>
    <tr>
         <td>4</td>
         <td>defgh</td>
     </tr>
     <tr>
         <td>5</td>
         <td>efghi</td>  
     </tr>
<table>

this solution is by far the most elegant and easy to adapt to specific use cases. — Chris, Oct 20 '21 at 09:56

score 0 · Answer 2 · answered Dec 26 '17 at 12:34

Don't use a second table, but instead a <tbody> element to wrap multiple rows together. These <tbody> elements can be used multiple times within the same table (see link). Using a second table leads to a different width of the columns. Furthermore, you added a second table inside only one cell of the parent table.

Here is an example:

document.querySelector('.more').addEventListener('click', function() {
  document.querySelector('.initially-hidden-rows').classList.remove('hidden');
});

table td,
table th {
  border: 1px solid black;
}

.more {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

.hidden {
  display: none;
}

<table>
  <tbody class="initial-rows">
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>abcde</td>
    </tr>
    <tr>
        <td>2</td>
        <td>bcdef</td>
    </tr>
    <tr>
        <td>3</td>
        <td>cdefg
          <a class="more">more</a>
        </td>
    </tr>
  </tbody>
  <tbody class="initially-hidden-rows hidden">
    <tr>
      <td>4</td>
      <td>defgh</td>
    </tr>
    <tr>
      <td>5</td>
      <td>efghi</td>  
    </tr>
  </tbody>
<table>

How to add collapse to table rows

2 Answers2