Toggle nested comments

1 comment

1. 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.

   Log in to Reply