Expandable And Collapsible Html Tables

Microsoft Teams

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:

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 following jQuery tutorials:

Bind SharePoint list items to dropdownlist and cascading dropdown using JavaScript and jQuery
Display SharePoint List items in a data table using Rest API and jQuery
Create a Custom Calendar in SharePoint 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)
Update People Picker Group field using Rest API and jQuery in SharePoint
Show/Hide/Disable HTML Controls using jQuery
Display SharePoint list item attachments using REST API and jQuery
JQuery accordion using content search web part in SharePoint server 2013
Get dropdown selected value and text using jquery in SharePoint
Coronavirus (COVID 19) Tracker in SharePoint Online

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

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.