Как загрузить кнопку «Показать больше» только после 10 записей?

Question

Я создал код, в котором хочу реализовать концепцию «загрузить больше», используя jQuery. Кажется, что код работает в соответствии с необходимостью, но есть небольшое изменение в требуемом коде.

Как я могу убедиться, что кнопка «Загрузить еще» видна только при наличии определенного количества записей?

Спасибо.

Редактировать: Итак, я достиг желаемой работы, добавив:

$('#loadMore').hide();
 if ($('.content').length > 7) {
  $('#loadMore').show();
}

$(document).ready(function(){
  $(".content").slice(0, 7).show();
  $("#loadMore").on("click", function(e){
    e.preventDefault();
    $(".content:hidden").slice(0, 7).slideDown();
    if($(".content:hidden").length == 0) {
      $("#loadMore").text("No Content").addClass("noContent");
    }
  });

$('#loadMore').hide();
if ($('.content').length > 7) {
  $('#loadMore').show();
}
  
})

*, body {
  margin: 0;
  padding: 0;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.content {
  height: 100px;
  width: 45%;
  color: #fff;
  font-size: 24px;
  line-height: 100px; /* centering text just for view */
  text-align: center;
  background-color: grey;
  margin: 5px;
  border: 1px solid lightgrey;
  display: none;
}
#loadMore {
  width: 200px;
  color: #fff;
  display: block;
  text-align: center;
  margin: 20px auto;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background-color: blue;
  transition: .3s;
}
#loadMore:hover {
  color: blue;
  background-color: #fff;
  border: 1px solid blue;
  text-decoration: none;
}
.noContent {
  color: #000 !important;
  background-color: transparent !important;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="flex">
    <div class="content">Box 1</div>
    <div class="content">Box 2</div>
    <div class="content">Box 3</div>
    <div class="content">Box 4</div>
    <div class="content">Box 5</div>
    <div class="content">Box 6</div>
    <div class="content">Box 7</div>
    <div class="content">Box 8</div>
  </div>
  
  <a href="#" id="loadMore">Load More</a>
</div>

Answer 1

1. Подсчет количества видимых элементов "содержимого".
2. Отображение / скрытие элемента "#loadMore" на основе вашего критерия.

    const MAX_CONTENT = 10;
    let contentShown = $(".content").length - $(".content:hidden").length;
    let displayButton = contentShown >= MAX_CONTENT;
    if (displayButton) {
      $("#loadMore").show();
    } else {
      $("#loadMore").hide();
    }