Reputation: 194
The comments are threaded three levels deep. The grandparent (depth-1) comments are all shown. I'd like to show the first two depth-2 replies (parent class comment) to every grandparent comment, and let the rest be hidden and displayed with toggle button (ideally one that changes text between "hide" and "show"). The depth-3 replies should all be hidden unless there is only one depth-2 reply, when, if possible, the first depth-3 reply should be shown so that a total of two replies is shown in all scenarios.
I have managed to toggle all depth-3 replies in a fiddle
Here is the markup and javascript (updated):
<div id="comments">
<ol class="commentlist">
<li class="comment byuser comment-author-admin even thread-even depth-1" id="li-comment-677">
<div id="comment-677" class="grandparent">
<div class="comment-inner">comment-677
</div>
<ul class="children">
<li class="comment byuser comment-author-admin odd alt depth-2" id="li-comment-678">
<div id="comment-678" class="parent">
<div class="comment-inner">comment-678</div>
<ul class="children">
<li class="comment byuser comment-author-admin even depth-3" id="li-comment-680">
<div id="comment-680">
<div class="comment-inner">comment-680</div>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-686">
<div id="comment-686">
<div class="comment-inner">comment-686</div>
</div>
</li>
<li class="comment byuser comment-author-admin even depth-3" id="li-comment-688">
<div id="comment-688">
<div class="comment-inner">comment-688</div>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-689">
<div id="comment-689">
<div class="comment-inner">comment-689</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="comment byuser comment-author-admin odd alt thread-odd thread-alt depth-1" id="li-comment-679">
<div id="comment-679" class="grandparent">
<div class="comment-inner">comment-679
</div>
<ul class="children">
<li class="comment byuser comment-author-admin even depth-2" id="li-comment-682">
<div id="comment-682" class="parent">
<div class="comment-inner">comment-682</div>
<ul class="children">
<li class="comment byuser comment-author-admin odd alt depth-3" id="li-comment-690">
<div id="comment-690">
<div class="comment-inner">comment-690</div>
</div>
</li>
</ul>
</div>
</li>
<li class="comment byuser comment-author-admin even depth-2" id="li-comment-691">
<div id="comment-691" class="parent">
<div class="comment-inner">comment-691</div>
</div>
</li>
</ul>
</div>
</li>
<ol>
</div>
Upvotes: 0
Views: 483
Reputation: 61083
You'd do basically the same thing you've done for the third level, but using a gt()
(zero-based) selector to skip the first two replies:
http://jsfiddle.net/isherwood/Frpmj/3
$(this).next('ul').find('li:gt(1)').slideToggle();
http://api.jquery.com/gt-selector/
Upvotes: 1