How to show more content using array slice in JavaScript?

Question

I am pretty new in JavaScript. I am trying to make a show more button using a javascript array slice. I want to target the next 3 div when a user clicks on the button. Every time he clicks on the button next 3 div will be visible to him

<button onclick="myFunction()">Show More</button>
<p id="demo">one</p>
<p id="demo" style="display:none;">two</p>
<p id="demo" style="display:none;">three</p>
<p id="demo" style="display:none;">four</p>
<p id="demo" style="display:none;">five</p>
<p id="demo" style="display:none;">six</p>
<p id="demo" style="display:none;">seven</p>
<p id="demo" style="display:none;">eight</p>

JavaScript

function myFunction() {
  var slice = [];
  slice[0] = document.getElementById("demo");
  var citrus = slice[0].slice(0, 3);
  citrus.style.display = "block";
}

I want to make this in pure JavaScript. I know this is very begginer level question but please help me to do this thing.

Brijesh Bhakta · Accepted Answer · 2020-03-21 09:54:28Z

3

Having multiple elements with the same id is invalid, use classes instead.

There are multiple ways to handle this situation, some of them are mentioned in the other answers.

Here is what I think would be a good solution for your requirements.

Style:

.hide-me {
    display: none;
  }

Html:

<button id="show-more" onclick="showMore()">Show More</button>
<p>one</p>
<p class="hide-me">two</p>
<p class="hide-me">three</p>
<p class="hide-me">four</p>
<p class="hide-me">five</p>
<p class="hide-me">six</p>
<p class="hide-me">seven</p>
<p class="hide-me">eight</p>

Script/Javascript:

Keep in mind I have used ES6 syntax to convert NodeList to Array, so browser compatibility should be checked before using it.

function showMore() {
    var hiddenPNodes = document.querySelectorAll('.hide-me');
    // Keep in mind this is an ES6 syntax so browser compatibility should be checked before using it.
    var first3 = Array.from(hiddenPNodes).slice(0, 3);
    first3.forEach(element => {
        element.classList.remove('hide-me');
    });
    // Assuming you want to hide the button when all elements are shown.
    if (hiddenPNodes.length <= 3) {
        hideShowMoreButton();
    }
}
function hideShowMoreButton() {
    document.getElementById('show-more').classList.add('hide-me');;
}

How this works:

When you click the button it will call the showMore function
The function will find the HTML elements with class hide-me.
Found list of Nodes will be converted to Array for getting the first 3 elements.
Looping over the final list of elements and removing the hide-me class.
When you want to hide the show more button just get the element by id and then add the class .hide-me just like we removed a class from classList

edited Mar 21, 2020 at 9:54

answered Mar 21, 2020 at 8:09

Brijesh Bhakta

1,2901 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohit Chandel Over a year ago

your way is more simpler than other answers, Thanks for helping.

Brijesh Bhakta Over a year ago

@MohitChandel Thanks for bringing it to my attention, updated the answer. Please check and let me know if you still have any questions.

Sajeeb Ahamed · Accepted Answer · 2020-03-21 07:57:49Z

First of all, don't use the same id of elements, instead use class. Here I attached the code you can try.

const moreBtn = document.querySelector('#showmore');

// Index 0 is already displaying so start from 1.
let currentIndex = 1;

moreBtn.addEventListener('click', (e) => {
  const demos = [...document.querySelectorAll('.demo')];
  
  for (let i = currentIndex; i < currentIndex + 3; i++) {
    if (demos[i]) {
      demos[i].style.display = 'block';      
    }
  }
  currentIndex += 3;
  
  // If you display all the elements then hide the show more button
  if (currentIndex >= demos.length) {
    event.target.style.display = 'none';
  }
  
})

<p class="demo">one</p>
<p class="demo" style="display:none;">two</p>
<p class="demo" style="display:none;">three</p>
<p class="demo" style="display:none;">four</p>
<p class="demo" style="display:none;">five</p>
<p class="demo" style="display:none;">six</p>
<p class="demo" style="display:none;">seven</p>
<p class="demo" style="display:none;">eight</p>
<button id="showmore">Show More</button>

CertainPerformance · Accepted Answer · 2020-03-21 07:48:38Z

Having multiple elements with the same ID in the same document is invalid.

You could do this with CSS: have one element and its following two siblings be visible, incrementing whenever the button is clicked:

let target = document.querySelector('.target');
const myFunction = () => {
  target.className = '';
  target = target.nextElementSibling;
  target.className = 'target';
};

p {
  display: none;
}
.target,
.target + p,
.target + p + p {
  display: block;
}

<button onclick="myFunction()">Show More</button>
<p class="target">one</p>
<p>two</p>
<p>three</p>
<p>four</p>
<p>five</p>
<p>six</p>
<p>seven</p>
<p>eight</p>

If you can't use a stylesheet:

const ps = [...document.querySelectorAll('p')];
const hide = () => {
  for (const p of ps) {
    p.style.display = 'none';
  }
};
let i = 0;
const myFunction = () => {
  hide();
  i++;
  for (const p of ps.slice(i, i + 3)) {
    p.style.display = 'block';
  }
};

p {
  display: none;
}
.target,
.target + p,
.target + p + p {
  display: block;
}

<button onclick="myFunction()">Show More</button>
<p class="target">one</p>
<p>two</p>
<p>three</p>
<p>four</p>
<p>five</p>
<p>six</p>
<p>seven</p>
<p>eight</p>

Collectives™ on Stack Overflow

How to show more content using array slice in JavaScript?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related