How to Expand and Collapse Table Rows with jQuery?

Expand and Collapse Table Rows with jQuery

Problem:

Expand and collapse table rows when a specific header column is clicked, limiting the expansion/collapse to rows beneath the clicked header.

Proposed Solution:

1. Identify the Header Rows: Add a class, such as "header," to the header rows.
2. Toggle Expansion/Collapse: Use jQuery's .nextUntil() method to select all rows beneath the clicked header until the next header is encountered. Then, use .slideToggle() to toggle the visibility of these rows.

Code Snippet:

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

HTML Structure:

<code class="html">&lt;table border=&quot;0&quot;&gt;
  &lt;tr class=&quot;header&quot;&gt;
    &lt;td colspan=&quot;2&quot;&gt;Header&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;data&lt;/td&gt;
    &lt;td&gt;data&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;data&lt;/td&gt;
    &lt;td&gt;data&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code>

Additional Features:

• Expand/Collapse Icon: Use a span element within the header cells to display an expand or collapse icon. Update the icon based on the current state.
• Promise Usage: Use jQuery's .promise() method to handle asynchronous operations, such as animation.
• CSS Pseudo-Element: Utilize a CSS pseudo-element to represent the expansion/collapse indicator and toggle a class on the header to control visibility.

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