2

У меня есть массив с данными и он рендерится на странцие через метод 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 при клике, но так и не понял как это грамотно реализовать, может тут кто то сталкивался с таким?

1 ответ 1

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>
<% } %>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.