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.

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.

• javascript
• arrays

Share Improve this question Follow edited Mar 25, 2020 at 14:33 Mohit Chandel asked Mar 21, 2020 at 7:44 Mohit ChandelMohit Chandel 1,9161313 silver badges3535 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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 patibility should be checked before using it.

function showMore() {
    var hiddenPNodes = document.querySelectorAll('.hide-me');
    // Keep in mind this is an ES6 syntax so browser patibility 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:

1. When you click the button it will call the showMore function

2. The function will find the HTML elements with class hide-me.

3. Found list of Nodes will be converted to Array for getting the first 3 elements.

4. Looping over the final list of elements and removing the hide-me class.

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

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>

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>