<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <button class="show">Показать ещё 2</button>
    <button class="hide">Скрыть 2</button>

body {
  background: #fff;
  color: #000;
  font-family: monospace;
  font-size: 24px;
}

/**
 * для вопроса https://qna.habr.com/q/701747
 * Почему когда доходит до конца, требуется двойной клик и выдает ошибку?
 */
const divs = document.querySelectorAll('div')
const length = divs.length;
const btnShow = document.querySelector('.show')
const btnHide = document.querySelector('.hide')

function showVisible(visible) {
  const toShow = Math.min(visible, length);

  for (let i=0; i < length; i++) {
      divs[i].style.display = i < toShow ? 'block' : 'none';
  }
}

let visible = 0;
showVisible(visible);

btnShow.addEventListener('click', function () {
  visible = Math.min(visible + 2, length);
  showVisible(visible);
});

btnHide.addEventListener('click', function () {
  visible = Math.max(visible - 2, 0);
  showVisible(visible);
});