How to implement expand/collapse in HTML table rows using jQuery

This jQuery tutorial, we will discuss how to implement expand/collapse in an HTML table rows using jQuery. Users can click on the expand button, which will display rows inside that. Similarly, when the user clicks on the collapse button, the HTML table rows will be collapsed.

There are two ways, we can implement expand/collapse in HTML table rows using jQuery.

Implement expand/collapse in HTML table rows using jQuery

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,

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

If you want to use the below code in a classic SharePoint page, then you can write the code inside a content editor or script editor web part.

Below is the sample of the HTML table structure.

	<table>  
	    <tr  data-toggle="toggle">  
	        <td >  
	            <p id="Technology" >  
	                <b>  
	                    <span class="plusminusTechnology">+</span>    
	                    <span lang="EN-IN">Technology </span>  
	                </b>  
	            </p>  
	        </td>  
	        <td ></td>  
	        <td ></td>  
	    </tr>  
	    <tbody class="hideTr">  
	        <tr >  
	            <td "></td>  
	            <td >  
	                <img height="28" src="clip_image001.png" v:shapes="Picture_x0020_5" width="106" />  
	            </td>  
	            <td   	  
	                <span lang="EN-IN">4</span>  
	            </td>  
	            <td   	                         
	</td>  
	        </tr>  
	    </tbody>  
	</table>  

Below is the script code to expand/collapse in HTML table rows:

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  	  
	<script type="text/javascript">  
	    $(document).ready(function () {  
	        debugger;  
	        $('.hideTr').slideUp(600);  
	     $('[data-toggle="toggle"]').click(function () {  
	        if ($(this).parents().next(".hideTr").is(':visible')) {  
	            $(this).parents().next('.hideTr').slideUp(600);  
	            $(".plusminus" + $(this).children().children().attr("id")).text('+');  
	           $(this).css('background-color', 'white');  
	            }  
	        else {  
	            $(this).parents().next('.hideTr').slideDown(600);  
	            $(".plusminus" + $(this).children().children().attr("id")).text('- ');  
	           $(this).css('background-color', '#c1eaff ');    
	        }  
	    });  
	    });  
	</script>  

The output will appear like below:

expand collapse in HTML table rows using jQuery
table collapse row
table collapse row
table collapse row

Implement expand/collapse in HTML table rows using jQuery

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:

  • Add a class of “parent” on each parent row (tr).
  • Give each parent row (tr) an id.
  • Give each child row a class of “child-ID” where ID is the id of the parent tr that it belongs to.

Below is the HTML code.

	<table id="detail_table" class="detail">  
	    <thead>  
	    <tr>  
	        <th>ID</th>  
	        <th colspan="2">Name</th>  
	        <th>Total</th>  
	    </tr>  
	</thead>  
	<tbody>  
	    <tr class="parent" id="row123" title="Click to expand/collapse" style="cursor: pointer;">  
	        <td>123</td>  
	        <td colspan="2">Bill Gates</td>  
	        <td>100</td>  
	    </tr>  
	    <tr class="child-row123" style="display: table-row;">  
	        <td> </td>  
	        <td>2018-01-02</td>  
	        <td>A short description of Microsoft revenue </td>  
	        <td>15</td>  
	    </tr>  
	    <tr class="child-row123" style="display: table-row;">  
	        <td> </td>  
	        <td>2018-02-03</td>  
	        <td>Another New Project description</td>  
	        <td>45</td>  
	    </tr>  
	    <tr class="child-row123" style="display: table-row;">  
	        <td> </td>  
	        <td>2010-03-04</td>  
	        <td>More New Stuff</td>  
	        <td>40</td>  
	    </tr>  	  
	    <tr class="parent" id="row456" title="Click to expand/collapse" style="cursor: pointer;">  
	        <td>456</td>  
	        <td colspan="2">Bill Brasky</td>  
	        <td>50</td>  
	    </tr>  
	    <tr class="child-row456" style="display: none;">  
	        <td> </td>  
	        <td>2009-07-02</td>  
	        <td>A short Two Describe a Third description</td>  
	        <td>10</td>  
	    </tr>  
	    <tr class="child-row456" style="display: none;">  
	        <td> </td>  
	        <td>2008-02-03</td>  
	        <td>Another New story description</td>  
	        <td>20</td>  
	    </tr>  
	    <tr class="child-row456" style="display: none;">  
	        <td> </td>  
	        <td>2009-03-04</td>  
	        <td>More story  Stuff</td>  
	        <td>20</td>  
	    </tr>  	  
	    <tr class="parent" id="row789" title="Click to expand/collapse" style="cursor: pointer;">  
	        <td>789</td>  
	        <td colspan="2">Phil Upspace</td>  
	        <td>75</td>  
	    </tr>  
	    <tr class="child-row789" style="display: none;">  
	        <td> </td>  
	        <td>2008-01-02</td>  
	        <td>A short New Games description</td>  
	        <td>33</td>  
	    </tr>  
	    <tr class="child-row789" style="display: none;">  
	        <td> </td>  
	        <td>20011-04-03</td>  
	        <td>Another Games description</td>  
	        <td>22</td>  
	    </tr>  
	    <tr class="child-row789" style="display: none;">  
	        <td> </td>  
	        <td>20011-04-04</td>  
	        <td>More Games Stuff</td>  
	        <td>20</td>  
	    </tr>  
	</tbody>  
	</table>  

Below is the script code to implement expand/collapse in HTML table rows using jQuery:

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

You can check the output will appear like below:

expand collapse in HTML table rows using jQuery
table collapse row

You may like the following jQuery tutorials:

In this tutorial, we learned how to implement expand/collapse in HTML table rows using jQuery.

  • Uncaught Error: Syntax error, unrecognized expression: tr[@class^=child-]
    weirdly, when I take that line out entirely, the script still appears to work but does not throw this error.
    $(document).ready(function () {
    $(‘tr.parent’)
    .css(“cursor”, “pointer”)
    .attr(“title”, “Click to expand/collapse”)
    .click(function () {
    $(this).siblings(‘.child-‘ + this.id).toggle();
    });
    // commented out $(‘tr[@class^=child-]’).hide().children(‘td’);
    });

  • The table expand/collapse functionality i am looking for is displayed by your table of contents at the top of this post, yet you do not even cover that method

  • >