changing div content using button

May 18, 2022

I want to make a button that will create a back page if I click this it will return to the last div content. I already have the function for the next page but I’m already ran out of logic for making a function for the back page button.

Here is my code for the content and my function for the next()

function next() {
  if ($('#content1').hasClass('')) {
    $('#content2').removeClass('hidden');
    $('#back').removeClass('hidden');
    $('#content1').addClass('hidden');
  } else if ($('#content2').hasClass('')) {
    $('#content2').addClass('hidden');
    $('#content3').removeClass('hidden');
  } else if ($('#content3').hasClass('')) {
    $('#content3').addClass('hidden');
    $('#content4').removeClass('hidden');
  } else if ($('#content4').hasClass('')) {
    $('#content4').addClass('hidden');
    $('#content5').removeClass('hidden');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="myDiv">
  <div id="content1">
    <h1>1</h1>
  </div>
  <div id="content2" class="hidden">
    <h1>2</h1>
  </div>
  <div id="content3" class="hidden">
    <h1>3</h1>
  </div>
  <div id="content4" class="hidden">
    <h1>4</h1>
  </div>
  <div id="content5" class="hidden">
    <h1>5</h1>
  </div>
  <button onclick='next()'>Next Page</button>
  <button id="back" onclick='back()' class="hidden">Back Page</button>
</div>

>Solution :

You could do it like this:

function next() {
  var div = $("div[id^=content]:visible")
  var nextdiv = div.next("[id^=content]");
  if (nextdiv) {
    div.addClass("hidden");
    nextdiv.removeClass("hidden");
    $("#back").show();
    $('#next').toggle(nextdiv.next("[id^=content]").length > 0)
  }
}

function back() {
  var div = $("div[id^=content]:visible")
  var prevdiv = div.prev("[id^=content]");
  if (prevdiv) {
    div.addClass("hidden");
    prevdiv.removeClass("hidden");
    $("#next").show();
    $('#back').toggle(prevdiv.prev("[id^=content]").length > 0)
  }
}

This will make it more dynamic and easier to manage.

One thing i use here is the [id^=content] selector. That means it will only select elements where the id starts with content.

function next() {
  var div = $("div[id^=content]:visible")
  var nextdiv = div.next("[id^=content]");
  if (nextdiv) {
    div.addClass("hidden");
    nextdiv.removeClass("hidden");
    $("#back").show();
    $('#next').toggle(nextdiv.next("[id^=content]").length > 0)
  }
}

function back() {
  var div = $("div[id^=content]:visible")
  var prevdiv = div.prev("[id^=content]");
  if (prevdiv) {
    div.addClass("hidden");
    prevdiv.removeClass("hidden");
    $("#next").show();
    $('#back').toggle(prevdiv.prev("[id^=content]").length > 0)
  }
}

.hidden {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv">
  <div id="content1">
    <h1>1</h1>
  </div>
  <div id="content2" class="hidden">
    <h1>2</h1>
  </div>
  <div id="content3" class="hidden">
    <h1>3</h1>
  </div>
  <div id="content4" class="hidden">
    <h1>4</h1>
  </div>
  <div id="content5" class="hidden">
    <h1>5</h1>
  </div>
  <button id="next" onclick='next()'>Next Page</button>
  <button id="back" onclick='back()' class="hidden">Back Page</button>
</div>