Как сделать кнопку показать еще на javascript?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div id="list">
  <!-- Список элементов для отображения -->
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <div class="item">Элемент 4</div>
  <div class="item">Элемент 5</div>
</div>

<button id="show-more">Показать еще</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

var button = document.getElementById("show-more");
var list = document.getElementById("list");
var items = list.getElementsByClassName("item");
var visibleItemCount = 2; // количество элементов, которые отображаются изначально
var hiddenItemCount = items.length - visibleItemCount; // количество скрытых элементов

// Скрыть все элементы, кроме первых visibleItemCount
for (var i = visibleItemCount; i < items.length; i++) {
  items[i].style.display = "none";
}

button.onclick = function() {
  // Отобразить следующие hiddenItemCount элементов
  for (var i = visibleItemCount; i < visibleItemCount + hiddenItemCount; i++) {
    if (items[i]) {
      items[i].style.display = "block";
    }
  }

  // Если все элементы отображены, скрыть кнопку
  if (visibleItemCount + hiddenItemCount >= items.length) {
    button.style.display = "none";
  }

  visibleItemCount += hiddenItemCount;
};

1
2
3

.item {
  margin-bottom: 10px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div id="list">
  <!-- Список элементов для отображения -->
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <div class="item">Элемент 4</div>
  <div class="item">Элемент 5</div>
</div>

<input type="number" id="item-count" value="2">
<button id="show-more">Показать еще</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

var button = document.getElementById("show-more");
var list = document.getElementById("list");
var items = list.getElementsByClassName("item");

button.onclick = function() {
  var count = parseInt(document.getElementById("item-count").value);
  var hiddenElements = Array.prototype.filter.call(items, function(item) {
    return item.style.display === 'none';
  });

  for (var i = 0; i < count; i++) {
    if (hiddenElements[i]) {
      hiddenElements[i].style.display = "block";
    } else {
      button.style.display = "none";
    }
  }
};

1
2
3
4

.item {
  margin-bottom: 10px;
  display: none;
}