Create a table with collapsible and expandable rows using JQuery

So, you want to create a table with rows which should collapse and expandable as user clicks. This may sound like a difficult-to-achieve effect but it is not. I’m going to explain a very simple method to create a table with collapsible and expandable rows using JQuery.

Show / Hide tables row using jQuery

As you can see in the following images, we have a simple table with only three columns.
The rows are collapsed by default. If you click on the text ‘Average Salary of Web developer’, the following two rows will appear, and if you click on the same text again, rows will collapse/disappear.

Add JQuery and OpenSans(Optional) in the head section of your document.
You can download JQuery from www.jquery.com or can use CDN to link the JQuery. I prefer the latter option.

Now, create a simple table with 3 columns and 3 rows.

<table>
  	<tbody>
  		<tbody class="labels">
  			<tr>
  				<td colspan="3">
  					<label for="salary">Average Salary of Web developer</label>
  					<input type="checkbox" name="salary" id="salary" data-toggle="toggle">
  				</td>
  			</tr>
  		</tbody>
  		<tbody class="hide">
  			<tr>
  				<td>Australia</td>
  				<td>$10,000.00</td>
  				<td>$3,500.00</td>
  			</tr>
  			<tr>
  				<td>Central America</td>
  				<td>$7,685.00</td>
  				<td>$3,544.00</td>
  			</tr>
  		</tbody>
  	 </tbody>
  </table>

Explanation

<label for=”salary”>Average Salary of Web developer</label>
<input type=”checkbox” name=”salary” id=”salary” data-toggle=”toggle”>

Data- attribute is new to Html5

According to w3specification: Custom data attributes are intended to store custom data private to the page or application, for

Let’s say you need an attribute which is not defined within the HTML tag. For example, you need an attribute to save the user name or email. There comes data-* attribute. You create custom attribute like data-username =”Someusername”, data-email = some@email.com.

These custom data attributes consist of two parts:

Attribute Name: It should be prefixed with ‘data-‘.

Attribute Value: It can be any string.

In this case, we have to use a data attribute to refer it using JQuery.

To hide the element (checkbox) by default, set the property display to none using CSS. This would make the label/text clickable.

body{font-family: 'Open Sans', sans-serif; color:#333; font-size:14px; padding:50px;}
  label{display:inline-block;   }
  .table{width:50%;}
  .table th,tr,td {
    padding: .75rem;
    text-align:left;
  }
  td {
  border-bottom: 1px solid #dee2e6;
    text-align:left;
  }
  tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
 }
 .label tr td label {
 	display: block;
 }


 [data-toggle="toggle"] {
 	display: none;
 }

The jQuery Code

  <script>
    $(document).ready(function() {


  $('[data-toggle="toggle"]').click( function() {
    $(this).parents().next('.hide').toggle();
});


});
  </script>

Explanation

$(this) would select the current element.

The parents() method will return all ancestor elements of the selected element.

$(this).parents().next(‘.hide’) will return the next sibling of the selected element’s parent, with .hide class.

The toggle() method toggles between show() and hide()

Related Articles

C# Keywords

C# Methods

C# Inheritance