<ul>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
    <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
  <li class="item">Item</li>
</ul>

<button id="load-more-comments">Load More</button>

body {
  margin: 1em;
}

.visually-hidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

var $parent = $("ul"),
    $items = $parent.find("li"),
    $loadMoreBtn = $("#load-more-comments"),
    maxItems = 10,
    hiddenClass = "visually-hidden";

    // add visually hidden class to items beyond maxItems
    $.each($items, function(idx,item){
      if(idx > maxItems - 1){
        $(this).addClass(hiddenClass);
      }
    });

    // onclick of show more button show more = maxItems
    // if there are none left to show kill show more button
    $loadMoreBtn.on("click", function(e){
      $("."+hiddenClass).each(function(idx,item){
        if(idx < maxItems - 1){
          $(this).removeClass(hiddenClass);
        }
        // kill button if no more to show
        if($("."+hiddenClass).size() === 0){
          $loadMoreBtn.hide();
        }
      });
    });