Подгрузка контента через кнопку "Показать еще"

199

17 июня 2022, 00:50

Есть такой вид списка новостей:

<ul class="news">
    <li>Новость 1</li>
    <li>Новость 2</li>
    <li>Новость 3</li>
    <li style="display:none;">Новость 4</li>
    <li style="display:none;">Новость 5</li>
    <li style="display:none;">Новость 6</li>
    <li style="display:none;">Новость 7</li>
    <li style="display:none;">Новость 8</li>
</ul>
<a href="">Показать еще</a>

Как сделать действие на кнопке "Показать еще", чтобы 3 следующие скрытые новости отобразились? При нажатии на кнопку еще раз - отобразились оставшиеся 2 скрытые новости.

У меня есть скрипт на javascript, который достает новости из базы mysql. Но необходим именно такой метод вывода, без подключения базы данных.

Answer 1

function showMore() {
  var hidden = document.querySelectorAll('.news .hidden');
  for (let i = 0; i < 3 && i < hidden.length; i++) {
    hidden[i].classList.remove('hidden');
  }
}

.hidden {
  display:none;
}

<ul class="news">
    <li>Новость 1</li>
    <li>Новость 2</li>
    <li>Новость 3</li>
    <li class="hidden">Новость 4</li>
    <li class="hidden">Новость 5</li>
    <li class="hidden">Новость 6</li>
    <li class="hidden">Новость 7</li>
    <li class="hidden">Новость 8</li>
</ul>
<a href="#" onclick="showMore()">Показать еще</a>

Answer 2

А зачем JavaScript? Всё реализуется средствами HTML. В примере даже CSS только для декораций. Без CSS работает не хуже.

details[open]>summary {
  display: none;
}
summary {
  display: block;
  cursor: pointer;
  padding: 10px;
  font-family: "Space Mono", monospace;
  transition: .3s;
  border: 1px solid;
  user-select: none;
  text-align: center;
}

<ul>
  <li>Новость 1</li>
  <li>Новость 2</li>
  <details>
    <summary>Показать еще</summary>
    <li>Новость 3</li>
    <li>Новость 4</li>
    <li>Новость 5</li>
    <details>
      <summary>Показать еще</summary>
      <li>Новость 6</li>
      <li>Новость 7</li>
      <li>Новость 8</li>
      <details>
        <summary>Показать еще</summary>
        <li>Новость 9</li>
        <li>Новость 10</li>
        <li>Новость 11</li>
        <details>
          <summary>Показать еще</summary>
          <li>Новость 12</li>
          <li>Новость 13</li>
          <li>Новость 14</li>
        </details>
      </details>
    </details>
  </details>
</ul>