title: Show/hide all comments but 3 latest for each section
body: <p>I have multiple questions on my page and each question has multiple comments. On page load I want to show the three latest comments for each question and hide the rest. Each question has a link that will show/hide all old comments.</p>
  
  <p>The problem is that when showing all comments for question 1 and I click on show all for question 2, all old comments on question 1 are hidden. I want each show/hide button to only effect that question's comments.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .user-comment-box { display:none }
  &lt;/style&gt;
  
  &lt;div class="comment-box-container"&gt;
    &lt;div class="comment-box"&gt; &lt;a class="see-more"&gt;Show all comments&lt;/a&gt;
      &lt;div class="user-comment-box"&gt; 0 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 1 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 2 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 3 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 4 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 5 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 6 &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;br /&gt;
  
  &lt;div class="comment-box-container"&gt;
    &lt;div class="comment-box"&gt; &lt;a class="see-more"&gt;Show all comments&lt;/a&gt;
      &lt;div class="user-comment-box"&gt; 0 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 1 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 2 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 3 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 4 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 5 &lt;/div&gt;
      &lt;div class="user-comment-box"&gt; 6 &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(function() {
      // Always show last 3 comments:
      $(".comment-box").each(function(index) {
          $(this).children(".user-comment-box").slice(-3).show();
      });
  
      $(".see-more").click(function(e) { // click event for load more
          e.preventDefault();
          var link = $(this);
          $(this).siblings(".user-comment-box:hidden").show(1, function() {
              if ($(this).is(':visible')) {
                  link.text('Show less comments');
                  $(this).addClass('showing-more')
              }
          });
  
          if ($('div').hasClass('showing-more')) {
              link.text('Show all comments');
              $('.showing-more').hide(1);
              $('div').removeClass("showing-more");
          }
      });
  });
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/5cc7qvk6/22/" rel="nofollow noreferrer">http://jsfiddle.net/5cc7qvk6/22/</a></p>