Display next two divs on every read-more button click

Question

In a page there are 10 posts but by default I have to display first 2 post then read-more button. When we click on read-more button then next 2 post(total 4 posts) will display then read-more button.It will be same until last post.

For example:

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

We have 10 divs and by default first two divs will display and then a Read-more button. On click read-more button next two divs will display.

Please anybody can explain how can we do this by HTML + jQuery?

Thank you,

Hi! Please post a code sample, so we can see what you have already tried. That will make it easier to assist you. — codeMonkey, Aug 05 '20 at 19:32

ikiK · Accepted Answer · 2020-08-05T20:51:23.090

Here is my take on this using jQuery as requested:

$(".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>

@VijayGupta Great, please consider to mark this answer as accepted on ✔︎ ,to mark it as solved for others. — ikiK, Aug 05 '20 at 21:56
Yes, I did. Please can you look into this post, its magento bug https://stackoverflow.com/questions/63161196/email-validation-on-registration-and-checkout-page-on-magento-2 — Vijay Gupta, Aug 06 '20 at 10:25

jmrker · Answer 2 · 2022-09-14T05:58:04.080

1

Similar to other answers but does not rely on JQuery.

Does not rely on global counter.

Also allows dynamic addition of addition messages and more than 2 displays at a time.

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>

edited Sep 14 '22 at 05:58

answered Aug 05 '20 at 20:52

jmrker

472
4
11

I love this solution! Do you know how to write "No More" instead of "More" on the button once there's no more entry left to show? – tez Sep 12 '22 at 22:29
See two line modification in post below to alter 'More' to 'No More' message of button. Had trouble editing original post. – jmrker Sep 14 '22 at 06:12
Thank you for the prompt answer, but modded part didn't work for me. Code snippet doesn't give the expected result either. Could you please check it again? – tez Sep 14 '22 at 08:34
The modifications are in a separate post below. It appears to work fine for me. Are you sure you are looking at the right code suggestion? I was unable to modify the post above, so I replied with a new post below. – jmrker Sep 16 '22 at 05:17
All is perfect now! Thank you very much! – tez Sep 16 '22 at 08:02

score 1 · Answer 3 · answered Sep 14 '22 at 06:10

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'); }
  if (limit == sel.length) { document.getElementById('more').innerHTML = 'No More'; }
}

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 id='more' data-count='2'>More</button>

score 0 · Answer 4 · answered Aug 05 '20 at 19:59

here's one way to get this done.

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>

Display next two divs on every read-more button click

4 Answers4