2

I am trying to find a solution to toggle (hide/show) threaded comments. I need to see only comments 1,2,3 etc... and hide 1.1,1.2,1.3 etc... Clicking "show comments" will toggle and display the thread of comments.

example:

1 ---

-----clicking "show more comments" shows

----- 1.1

----- 1.2

----- 1.3

----- ...

2 ---

-----clicking "show more comments" shows

----- 2.1

----- 2.2

----- 2.3

----- ...

4

http://jsfiddle.net/K3gr7/4/

I used an ordered list to markup the comments. You probably need to tweak it to your own setup, and cache some variables for optimization, but the functionality is in there.

$(document).ready(function() {

    // Toggle all
    $('#toggle-all').click(function() {
        var $subcomments = $('#comments').find('> li > ol');
        if ($subcomments.filter(':hidden').length) {
            $subcomments.slideDown();
        } else {
            $subcomments.slideUp();
        }
    });

    // Add buttons to threaded comments
    $('#comments').find('> li > ol')
        .before('<button class="toggle">Show more comments</button>');

   // Toggle one section
    $('#comments').find('button.toggle').click(function() {
        $(this).next('ol').slideToggle();
    }); 
});

I misread your question at first, that's why I added a "toggle all" button and left it in there as a free bonus.

  • Tweaked and working! Thanks, that was easy and I learned some new jQuery stuff! Thanks!! – Andycap May 8 '11 at 8:37
  • I tried the above code, but noticed that instead of having 'ol' I have 'ul' on the child comments. It seems the standard wp output is 'ol-li--ul-li---li' Would you mind posting a moded vs. of the little script to work with children comments that use 'ul' instead of 'ol'? – shawn May 8 '11 at 21:42
  • @shawn: jsfiddle.net/K3gr7/12 – Geert May 9 '11 at 4:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.