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 a >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.

      + Technology  
  
 
     4

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

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.

    ID  Name  Total  
 
  123  Bill Gates  100  
 2018-01-02  A short description of Microsoft revenue  15  
 2018-02-03  Another New Project description  45  
 2010-03-04  More New Stuff  40  
 456  Bill Brasky  50  
 2009-07-02  A short Two Describe a Third description  10  
 2008-02-03  Another New story description  20  
 2009-03-04  More story Stuff  20  
 789  Phil Upspace  75  
 2008-01-02  A short New Games description  33  
 20011-04-03  Another Games description  22  
 20011-04-04  More Games Stuff  20

ID	Name	Total
123	Bill Gates	100
2018-01-02	A short description of Microsoft revenue	15
2018-02-03	Another New Project description	45
2010-03-04	More New Stuff	40
456	Bill Brasky	50
2009-07-02	A short Two Describe a Third description	10
2008-02-03	Another New story description	20
2009-03-04	More story Stuff	20
789	Phil Upspace	75
2008-01-02	A short New Games description	33
20011-04-03	Another Games description	22
20011-04-04	More Games Stuff	20

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

You can check the output will appear like below:

You may like the following jQuery tutorials:

Display SharePoint List items in a data table using Rest API and jQuery
Display SharePoint list data in jQuery data table using Rest API
Get Current User Details Using JavaScript Object Model (jsom)
Display SharePoint list item attachments using REST API and jQuery

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

Preeti Sahu is an expert in Power Apps and has over six years of experience working with SharePoint Online and the Power Platform. She is the co-author of Microsoft Power Platform: A Deep Dive book. As a Power Platform developer, she has worked on developing various tools using Power Apps and Power Automate. She also makes Microsoft 365 videos and shares them on YouTube.

+ Technology
	4