changing div content using button

Question

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>

mplungjan · Accepted Answer · 2022-05-19 05:25:49Z

1

You can simplify this.

Here I remove the inline functions and have only one function.

Also no need for classes.

$(function() {
  const $container = $("div.myDiv");
  const $contents = $(".myDiv > div");
  const last = $contents.length - 1;

  $(".nav").on("click", function() {
    const isNext = $(this).is("#next"); // we clicked next
    const $cur = $container.find("div:visible"); // currently visible
    const $show = isNext ? $cur.next() : $cur.prev(); // next or prev div?
    const idx = $show.index();
    $("#prev").toggle(idx >= 1);
    $("#next").toggle(idx < last);
    $("#reveal").toggle(idx >= last);
    $cur.hide();
    $show.show();
  });
});

<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" hidden>
    <h1>2</h1>
  </div>
  <div id="content3" hidden>
    <h1>3</h1>
  </div>
  <div id="content4" hidden>
    <h1>4</h1>
  </div>
  <div id="content5" hidden>
    <h1>5</h1>
  </div>
  <button class="nav" id="prev" hidden>Previous Page</button>
  <button class="nav" id="next">Next Page</button>
  <button id="reveal" hidden>Reveal</button>

</div>

edited May 19, 2022 at 5:25

answered May 18, 2022 at 7:21

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

E Co Over a year ago

I want to add a Reveal Button if it reaches the last page it will show the Reveal Button how do I make it using your javascript?

mplungjan Over a year ago

Same way wou hide the next. I updated

E Co Over a year ago

Where do I put the scrollTop or the scrollIntoView so that everytime I click the next it will automatically scroll to the top I'm using overflow: auto; in my css

mplungjan Over a year ago

It would be very useful if you updated the snippet I made you when you first asked, with all the elements and css that is relevant to your questions.. You can do $show.show(); $show[0].scrollIntoView() if you need to scroll the div into view. I need to use [0] to get the DOM element

Carsten Løvbo Andersen · Accepted Answer · 2022-05-18 07:23:19Z

0

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>

answered May 18, 2022 at 7:23

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

4 Comments

mikenlanggio Over a year ago

@ECo Don't just "thank you" like that! Do your action

Carsten Løvbo Andersen Over a year ago

@mikenlanggio Don't "Do you action". There is nothing wrong with a "thank you". Maybe users wanner test the solutions good before accepting, and it's not uncommon for answers to be accepts a day or 2 after. Also why not explain to the OP way it's better to accept the answer rather than "yelling" at him

E Co Over a year ago

@mikenlanggio actually I already accepted the answer however, it says I need to wait 1 minute before accepting it :)

Carsten Løvbo Andersen Over a year ago

@ECo Don't worry. Sometimes people are sadly just in a rush. Happy to help.

Collectives™ on Stack Overflow

changing div content using button

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related