How to Expand/Collapse Table Rows with jQuery?

Expand/Collapse Table Rows with jQuery

Expanding and collapsing table rows based on header clicks is a common requirement in web design. In this article, we will explore how to achieve this using jQuery.

Given the following table structure:

<code class="html"><table>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table></code>

We can approach this task by assigning a unique class to each header row. When a header is clicked, we can use the nextUntil method to select all rows beneath it until the next header. This allows us to collapse or expand only the relevant rows based on the header that was clicked.

Here's a simple jQuery code snippet to implement this behavior:

<code class="js">$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

In this code, we attach a click event to all elements with the header class. When a header is clicked, it finds all subsequent rows until the next header and toggles their visibility using slideToggle.

Alternative Methods

Another option is to use the toggle method instead of slideToggle, which provides a simpler implementation:

<code class="js">$('.header').click(function () {
    $(this).toggleClass('expand');
    $(this).nextUntil('tr.header').toggle();
});</code>

Here, we toggle a expand class on the clicked header and toggle the display of all subsequent rows using toggle.

Finally, CSS pseudo-elements can also be utilized for a more visual representation of the expansion/collapse state:

<code class="css">.header .sign:after {
  content: "+";
  display: inline-block;
}

.header.expand .sign:after {
  content: "-";
}</code>

<code class="js">$('.header').click(function () {
    $(this).toggleClass('expand');
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

In this version, the expand class also changes the sign displayed by the CSS pseudo-element from a plus to a minus, providing a visual indication of the row state.

The above is the detailed content of How to Expand/Collapse Table Rows with jQuery?. For more information, please follow other related articles on the PHP Chinese website!