JSFiddle - React, Tailwind, and code Playground

HTML

<div id="jobb">
  <form id="gombok">
    <span>
                        <input type="button" class="toggle" name="previous" value="Előző">
                        <input type="button" class="toggle" href="#bal" name="next" value="Következő">
                    </span>
  </form>
</div>

<div id="bal" class="sib">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper felis in nunc tincidunt lacinia. Aenean interdum, lorem pretium maximus euismod, dolor tellus porta velit, sed dapibus ex velit non ante. Morbi consequat rhoncus erat, a laoreet felis
    commodo eget. Phasellus sed justo nibh. Quisque ut felis malesuada, dictum erat vel, vehicula nunc. Sed quis facilisis enim. Sed non magna nisl. Duis pellentesque tempus mollis.</p>
  <p>In ultrices mauris risus, ac blandit arcu vehicula vel. Mauris in nulla nulla. Praesent dignissim justo at lorem tempus molestie. Nunc interdum, justo non iaculis mollis, quam ipsum mollis massa, id dignissim odio purus quis ex. Ut a odio venenatis,
    malesuada diam et, blandit magna. Nam scelerisque purus ut risus interdum, et vehicula augue vestibulum. Proin mattis vehicula arcu, sit amet suscipit velit malesuada sed. In hac habitasse platea dictumst. Ut non laoreet dolor. Nunc pellentesque nulla
    at justo maximus dignissim. </p>
  <p>ellentesque convallis sapien eget tortor fermentum, nec consequat lacus interdum. Sed id pulvinar risus, eu ornare tellus. Morbi non ex magna. Nunc sed massa id dolor ultrices consequat. Curabitur fermentum nibh quis sollicitudin condimentum. Integer
    a quam vitae quam fringilla consectetur. Donec vehicula, risus sed sagittis condimentum, risus neque luctus mauris, accumsan consectetur lectus nisi id tellus. Quisque eu sapien non lectus imperdiet tincidunt consequat non metus. Nulla egestas iaculis
    arcu sed elementum. Praesent pellentesque sem purus. Nulla hendrerit leo lacus, sit amet sodales ante porttitor at. Fusce dapibus laoreet dui, sit amet ornare odio mollis...

CSS

#bal {
  width: 48%;
  border: 1px solid red;
  padding: 1em;
}

#bal p {
  display: none;
}

#bal p:nth-child(1) {
  display: block;
}

#jobb {
  width: 48%;
  float: right;
}

JavaScript

var count = 0;
var elms = document.getElementById("bal").children;

function show(elem) {
  elem.style.display = 'block';
}

function hide(elem) {
  elem.style.display = 'none';
}

function toggle(elem, next) {
  if (window.getComputedStyle(elem).display === 'block') {
    hide(elem);
    show(next);
    return;
  }
}

function navigate(action) {

  var oldElm = elms[count];
  var newElm, newCount;

  switch (action) {

    case 'Előző':
      newCount = count - 1;
      break;

    case 'Következő':
      newCount = count + 1;
      break;

    default:

  }

  newElm = elms[newCount] || null;

  if (newElm) {
    toggle(oldElm, newElm);
    count = newCount;
  }

}

document.addEventListener('click', function(event) {

  event.preventDefault();
  if (!event.target.classList.contains('toggle')) return;
  navigate(event.target.value);

}, false);