JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

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

<div id="bal" class="sib">
  <p>P1</p>
  <p>P2</p>
  <p>P3</p>
  <p>P4</p>
  <p>P5</p>
</div>

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;

function bla() {
	var num = document.querySelectorAll("div#bal p").length - 1;
  if (count < 0) {
    count = num;
  } else if (count > num) {
    count = 0;
  }

  var all = document.querySelectorAll("div#bal p");
  for (var i = 0; i < all.length; i++) {
    all[i].style.display = "none";
  }

  document.querySelectorAll("div#bal p")[count].style.display = "block";
}