Expand/Collapse Table Rows With jQuery

In this article, we will explore two ways to expand/collapse HTML table rows.

First Option for expanding/collapsing HTML table row

 
A common UI will have an HTML table of data rows. When we click on "Expand", it shows a detailed breakdown of "child" rows below the "parent" row. In a parent row, click on the “+” sign; it expands the child row with detailed information. At the same time, the parent sign toggles to “- “.

Once we click on “- “sign, then it will collapse child rows with parent sign “+”.

The requirements are,

  1. Put a class of "parent" on each parent row (tr).
  2. Give each parent row (tr) an attribute ”data-toggle="toggle"”.
  3. Give each child row cover under <tbody> a class=hideTr.

Below is the sample of the table structure.

  1. <table>  
  2.     <tr  data-toggle="toggle">  
  3.         <td >  
  4.             <p id="Technology" >  
  5.                 <b>  
  6.                     <span class="plusminusTechnology">+</span>    
  7.                     <span lang="EN-IN">Technology </span>  
  8.                 </b>  
  9.             </p>  
  10.         </td>  
  11.         <td ></td>  
  12.         <td ></td>  
  13.     </tr>  
  14.     <tbody class="hideTr">  
  15.         <tr >  
  16.             <td "></td>  
  17.             <td >  
  18.                 <img height="28" src="clip_image001.png" v:shapes="Picture_x0020_5" width="106" />  
  19.             </td>  
  20.             <td   
  21.   
  22.                 <span lang="EN-IN">4</span>  
  23.             </td>  
  24.             <td   
  25.                          
  26. </td>  
  27.         </tr>  
  28.     </tbody>  
  29. </table>  

Script Code

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  2.   
  3. <script type="text/javascript">  
  4.     $(document).ready(function () {  
  5.         debugger;  
  6.         $('.hideTr').slideUp(600);  
  7.      $('[data-toggle="toggle"]').click(function () {  
  8.         if ($(this).parents().next(".hideTr").is(':visible')) {  
  9.             $(this).parents().next('.hideTr').slideUp(600);  
  10.             $(".plusminus" + $(this).children().children().attr("id")).text('+');  
  11.            $(this).css('background-color''white');  
  12.             }  
  13.         else {  
  14.             $(this).parents().next('.hideTr').slideDown(600);  
  15.             $(".plusminus" + $(this).children().children().attr("id")).text('- ');  
  16.            $(this).css('background-color''#c1eaff ');    
  17.         }  
  18.     });  
  19.     });  
  20. </script>  

Expand/Collapse Table Rows With jQuery 

Expand/Collapse Table Rows With jQuery
 
Expand/Collapse Table Rows With jQuery 
 

Second option

A common UI which will have an HTML table of record rows, in which when we click on "Expand", it shows a detailed breakdown of "child" rows below the "parent" row.

The requirements are:

  1. Add a class of "parent" on each parent row (tr).
  2. Give each parent row (tr) an id.
  3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs to.
  1.   <table id="detail_table" class="detail">  
  2.     <thead>  
  3.     <tr>  
  4.         <th>ID</th>  
  5.         <th colspan="2">Name</th>  
  6.         <th>Total</th>  
  7.     </tr>  
  8. </thead>  
  9. <tbody>  
  10.     <tr class="parent" id="row123" title="Click to expand/collapse" style="cursor: pointer;">  
  11.         <td>123</td>  
  12.         <td colspan="2">Bill Gates</td>  
  13.         <td>100</td>  
  14.     </tr>  
  15.     <tr class="child-row123" style="display: table-row;">  
  16.         <td> </td>  
  17.         <td>2018-01-02</td>  
  18.         <td>A short description of Microsoft revenue </td>  
  19.         <td>15</td>  
  20.     </tr>  
  21.     <tr class="child-row123" style="display: table-row;">  
  22.         <td> </td>  
  23.         <td>2018-02-03</td>  
  24.         <td>Another New Project description</td>  
  25.         <td>45</td>  
  26.     </tr>  
  27.     <tr class="child-row123" style="display: table-row;">  
  28.         <td> </td>  
  29.         <td>2010-03-04</td>  
  30.         <td>More New Stuff</td>  
  31.         <td>40</td>  
  32.     </tr>  
  33.   
  34.     <tr class="parent" id="row456" title="Click to expand/collapse" style="cursor: pointer;">  
  35.         <td>456</td>  
  36.         <td colspan="2">Bill Brasky</td>  
  37.         <td>50</td>  
  38.     </tr>  
  39.     <tr class="child-row456" style="display: none;">  
  40.         <td> </td>  
  41.         <td>2009-07-02</td>  
  42.         <td>A short Two Describe a Third description</td>  
  43.         <td>10</td>  
  44.     </tr>  
  45.     <tr class="child-row456" style="display: none;">  
  46.         <td> </td>  
  47.         <td>2008-02-03</td>  
  48.         <td>Another New story description</td>  
  49.         <td>20</td>  
  50.     </tr>  
  51.     <tr class="child-row456" style="display: none;">  
  52.         <td> </td>  
  53.         <td>2009-03-04</td>  
  54.         <td>More story  Stuff</td>  
  55.         <td>20</td>  
  56.     </tr>  
  57.   
  58.     <tr class="parent" id="row789" title="Click to expand/collapse" style="cursor: pointer;">  
  59.         <td>789</td>  
  60.         <td colspan="2">Phil Upspace</td>  
  61.         <td>75</td>  
  62.     </tr>  
  63.     <tr class="child-row789" style="display: none;">  
  64.         <td> </td>  
  65.         <td>2008-01-02</td>  
  66.         <td>A short New Games description</td>  
  67.         <td>33</td>  
  68.     </tr>  
  69.     <tr class="child-row789" style="display: none;">  
  70.         <td> </td>  
  71.         <td>20011-04-03</td>  
  72.         <td>Another Games description</td>  
  73.         <td>22</td>  
  74.     </tr>  
  75.     <tr class="child-row789" style="display: none;">  
  76.         <td> </td>  
  77.         <td>20011-04-04</td>  
  78.         <td>More Games Stuff</td>  
  79.         <td>20</td>  
  80.     </tr>  
  81. </tbody>  
  82. </table>  

Script Code

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  2. <script type="text/javascript">  
  3.     $(document).ready(function () {  
  4.             $('tr.parent')  
  5.                 .css("cursor""pointer")  
  6.                 .attr("title""Click to expand/collapse")  
  7.                 .click(function () {  
  8.                     $(this).siblings('.child-' + this.id).toggle();  
  9.                 });  
  10.             $('tr[@class^=child-]').hide().children('td');  
  11.     });  
  12.     </script>  

Expand/Collapse Table Rows With jQuery 

Expand/Collapse Table Rows With jQuery