Как добавить кнопку “показать ещё”?

145

21 января 2020, 07:10

У меня есть массив с данными и он рендерится на странцие через метод for вот пример кода

    <% for(var i=0; i < reviews.length; i++) {%>
                <div class="review-container">
                    <div class="account-icon-wrap">
                        <i class="material-icons account-icon">account_circle</i>
                    </div>
                    <div class="review-info">
                        <div class="name">
                            <%= reviews[i].name %>
                        </div>
                        <div class="rating">
                            <div class="stars-outer">
                        </div>
                        </div>
                    </div>
                </div> <% } %>

необходимо, что бы рендерились только первые 3 комментария, а остальные былы скрыты и открывались только при клике на кнопку "показать ещё", как можно это грамотно реализовать? думал просто первые 3 рендерить, а остальные загонять в див с кнопкой и при помощи jquery делать show при клике, но так и не понял как это грамотно реализовать, может тут кто то сталкивался с таким?

Answer 1

<style>
.hidden { display:none; }
</style>
<% for(var i=0; i < reviews.length; i++) {%>
  <div class="review-container <% if (i > 2) { %>hidden<% } %>">
    <div class="account-icon-wrap">
      <i class="material-icons account-icon">account_circle</i>
    </div>
    <div class="review-info">
      <div class="name">
        <%: reviews[i].name %>
      </div>
      <div class="rating">
        <div class="stars-outer">
        </div>
      </div>
    </div>
  </div> 
<% } %>
<% if (reviews.length > 3) { %>
  <div class="show-more">Show more...</div>
  <script>
  $(document).ready(function(){
    $(".show-more").click(function(e){
      $(".review-container.hidden").removeClass("hidden");
      $(this).hide();
    });
  });
  </script>
<% } %>