Отображать следующие два блока при каждом нажатии кнопки «Читать дальше»

Question

На странице 10 сообщений, но по умолчанию я должен отображать сначала 2 сообщения, затем кнопку «Читать дальше». Когда мы нажимаем кнопку «Читать дальше», отобразятся следующие 2 сообщения (всего 4 сообщения), а затем кнопка «Читать дальше». Она будет такой же до последней публикации.

Например:

<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>

У нас есть 10 блоков, и по умолчанию будут отображаться первые два блока, а затем кнопка «Читать дальше». При нажатии кнопки «Читать дальше» отобразятся следующие два блока.

Кто-нибудь может объяснить, как мы можем это сделать, с помощью HTML + jQuery?

Спасибо,

Answer 1

Вот мой подход к этому, используя jQuery по запросу:

$(".feed-post:eq( 0 )").show();
$(".feed-post:eq( 1 )").show();

function next2() {
  var notVisible = -1;
  $('.feed-post').each(function() {
    if ($(this).css('display') !== 'none') {
      notVisible = notVisible + 1;
    }
  });
  $(".feed-post:eq( " + (notVisible + 1) + " )").show();
  $(".feed-post:eq( " + (notVisible + 2) + " )").show();
}

.feed-post {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<button onclick='next2()'>read more</button>

Answer 2

Аналогично другим ответам, но не зависит от JQuery.

Не зависит от глобального счетчика.

Также позволяет динамически c добавлять сообщения добавления и более 2 дисплеев за один раз.

function showMessages(cnt) {  // alert(cnt);
  const sel = document.querySelectorAll('.feed-post');
  let limit = Math.min(cnt,sel.length);
  for (let i=0; i<limit; i++) { sel[i].classList.remove('hide'); }
}

function init() {
  let btnMore = document.querySelector('button');
  const sel = document.querySelectorAll('.feed-post'); 

  let count = btnMore.dataset.count;  
  for (let i=count; i<sel.length; i++) { sel[i].classList.add('hide'); }

  btnMore.addEventListener('click', function () {
    let counter = btnMore.dataset.count || 0;
    btnMore.dataset.count = parseInt(counter) + 2;  // More/less displays
    showMessages(counter);
  });
  btnMore.click();

} init();

  .hide { display: none; };

<div class="feed-post">Test message  1</div>
<div class="feed-post">Test message  2</div>
<div class="feed-post">Test message  3</div>
<div class="feed-post">Test message  4</div>
<div class="feed-post">Test message  5</div>
<div class="feed-post">Test message  6</div>
<div class="feed-post">Test message  7</div>
<div class="feed-post">Test message  8</div>
<div class="feed-post">Test message  9</div>
<div class="feed-post">Test message 10</div>
<p />
<button data-count='2'>More</button>

Answer 3

вот один из способов сделать это.

var parent = document.getElementById('container');
var posts = ['post1','post2','post3','post4','post5','post6','post7','post8','post9','post10'];
var p; 

function next2(){
var pcnt = document.getElementsByTagName('p').length;
if(pcnt>8)return

for(let i = pcnt; i < pcnt+2;i++){
   p = document.createElement("p");
   p.innerHTML = posts[i]
   parent.appendChild(p);
   }
}

next2();

<div id='container'></div>
<button onclick='next2()'>read more</button>