Question 279772 in Html Question posted in
Some basic documentation can be found here.

Html – Clicking a button to show next div?

I have a page with multiple divs. I want there to be buttons that, when clicked on, go to the next div. E.g. Div #1 is visible on the page. It has a ‘next’ button on it. When the user clicks the next button, it goes to another div on the same page that was previously hidden/invisible (set to display:none). This is the webpage I’m editing. I’m willing to use non-JS solutions to this if that’s possible but I assume JS is the best/most efficient way to approach this?

I was thinking something like this but copying it didn’t work and neither did anything else I’ve tried no matter how much I modified my code.

I don’t know much about javascript yet so it’s my fault for trying this before having the necessary knowledge but I’m desperate to make it work haha

This is a highly simplified version of what I was trying to do with my code:

CSS:

.entry {
      text-align: left;
      padding-top: 0px;
      padding-bottom: 1px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 15px;
      font-family: Book Antiqua;
      width: 550px;
      height:500px;
      overflow:auto;
      margin: auto;
    }

HTML:

<div class="entry">

<p>paragraph text 1</p>

<button class="next">Next</button>
</div>


<div class="entry" style="display:none;">

<p>paragraph text 2</p>
<button class="back">Back</button>
<button class="next">Next</button>

</div>


<div class="entry" style="display:none;">

<p>paragraph text 3</p>
<button class="back">Back</button>
<button class="next">Next</button>

</div>

Javascript:

$('.next').click(function(){
   $(this).parent().hide().next().show();//hide parent and show next
});

$('.back').click(function(){
   $(this).parent().hide().prev().show();//hide parent and show previous
});

I believe the problem is to do with a lack of a parent element? But I’m not sure.

Tags:

2

Answers


  1. 0

    Your code seems to work, but it is a bit fragile since it relies on a very specific HTML structure. Here’s what your code does

    • $(this) – selects the button that was just clicked
    • .parent() selects the parent element of the button, which should be the .entry element
    • .hide() – This will hide the .entry element that was just selected
    • .next() – This will select the element that appears after the .entry element that was just selected. Hopefully this will be another .entry element.
    • .show() – This will show whatever element is now selected

    Instead I recommend doing something like this. First we select all the .entry elements once and keep track of the index of which one is currently being shown.

    When a button is clicked we either make that number go up or down, and then show the .entry with that matching index. This no longer requires the HTML to be in an extremely specific format and order.

    const entryElements = $('.entry');
let entryIndex = 0;

$('.next').click(function(){
   entryIndex++;
   entryElements.hide();
   $(entryElements[entryIndex]).show();
});

$('.back').click(function(){
   entryIndex--;
   entryElements.hide();
   $(entryElements[entryIndex]).show();
});
    .entry {
  text-align: left;
  padding-top: 0px;
  padding-bottom: 1px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 15px;
  font-family: Book Antiqua;
  width: 550px;
  height:500px;
  overflow:auto;
  margin: auto;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="entry">
  <p>paragraph text 1</p>

  <button class="next">Next</button>
</div>


<div class="entry" style="display:none;">
  <p>paragraph text 2</p>
  <button class="back">Back</button>
  <button class="next">Next</button>
</div>


<div class="entry" style="display:none;">
  <p>paragraph text 3</p>
  <button class="back">Back</button>
</div>
    Login or Signup to reply.
  2. 0

    Plain JS solution, so it doesn’t require the use of the jQuery library. more lightweight and efficient.

    var entries = document.querySelectorAll(".entry");
var nextButtons = document.querySelectorAll(".next");
var backButtons = document.querySelectorAll(".back");

nextButtons.forEach(function(button, index) {
  button.addEventListener("click", function() {
    entries[index].style.display = "none";
    entries[index + 1].style.display = "block";
  });
});

backButtons.forEach(function(button, index) {
  button.addEventListener("click", function() {
    entries[index + 1].style.display = "none";
    entries[index].style.display = "block";
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search