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
implement expand collapse in HTML table rows using jQuery

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

You may like following jQuery tutorials:

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

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

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.

>