How to Toggle Table Row Visibility with Header Clicks using jQuery and CSS?

Expand and Collapse Table Rows on Header Click

This article addresses the challenge of expanding and collapsing specific table rows when the corresponding header columns are clicked.

The provided HTML table consists of rows with alternating header sections. To achieve the desired behavior, we'll leverage the power of jQuery.

jQuery Approach

1. Identify header elements: Use the .header class to determine which table rows serve as headers.
2. Toggle visibility: Upon clicking a header, use the nextUntil method to select all rows that follow that header until the next header is encountered. The slideToggle method then expands or collapses the selected rows.

Code Snippet

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

Alternative Approach Using CSS and a Pseudo-Element

1. CSS Rule: Define a pseudo-element with the :after property to represent the expansion/collapse sign ( or -).
2. Toggle CSS Class: Assign an 'expand' class to the clicked header and toggle its display based on the state of the pseudo-element.

Code Snippet

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

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

This alternative approach avoids the need to track multiple CSS classes, simplifying the implementation.

The above is the detailed content of How to Toggle Table Row Visibility with Header Clicks using jQuery and CSS?. For more information, please follow other related articles on the PHP Chinese website!