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
Code Snippet
<code class="javascript">$('.header').click(function(){ $(this).nextUntil('tr.header').slideToggle(1000); });</code>
Alternative Approach Using CSS and a 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!