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.

Table of Contents

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:

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:

You may like the following jQuery tutorials:

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

Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core
Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

I love your blog, it just helped me practically with my Computer Science examination. Thanks

Uncaught Error: Syntax error, unrecognized expression: tr[@class^=child-]

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