How can I use JQuery to create an efficient method for Next and Prev buttons to show/hide Sections of a single HTML Page?

Question

I have a single HTML file comprised of several sections and I need to be able to display one Section at a time. Each section will have Next and Previous buttons at the bottom which will show the next Section and hide the section currently in focus.

Originally I was using a very simple method to achieve achieve this:

<section id="Page1" class="page" style="display:none">
  <p>Content of page 1</p>
  <h3><span onclick="show('Page2');">Next</span></h3>
</section>
<section id="Page2" class="page" style="display:none">
  <p>Content of page 2</p>
  <h3><span onclick="show('Page1');">Previous</span></h3>
  <h3><span onclick="show('Page3');">Next</span></h3>
</section>
<section id="Page3" class="page" style="display:none">
  <p>Content of page 3</p>
  <h3><span onclick="show('Page2');">Previous</span></h3>
</section>

However, since the number of Sections will fluctuate, and the very first and last section will always have the same content, I want to make it easy for the person using this HTML template to simply delete all unneeded sections in between without having to update the IDs targeted by the Prev/Next button code.

Here's my Fiddle: Next Previous Button Fiddle

I started some JQuery that ALMOST works (beneath the //Next Prev Buttons comment). I'm using :focus, which means it's only targeting the Span that contains the button, but I can't figure out the selector for the button's parent Section tag.

Thanks in advance for your time. :)

Answer 1

Change your functions to this:

//Next Prev Buttons

$('.pageNext').on('click', function showNext(){
    //$(":focus").next('section').show();
    $(this).parent().parent().hide();
$(this).parent().parent().next().show();
});

$('.pagePrev').on('click', function showPrev(){
    //$(":focus").next('section').show();
    $(this).parent().parent().hide();
$(this).parent().parent().prev().show();
});

Answer 2

The :focus selector won't select your <span> because it isn't a typically "tabbable" element . Since the <span> is the element that was clicked to trigger your click handler, you can access it through this (or $(this) if you want the jQuery version).

$.next only searches siblings of the selected element . Since the next section isn't a sibling of your <span> , $.next won't find it. You'll need to find the parent <section> with $.closest('section') and move to the next section from there.

You're using $(this).hide(); , which only hides the clicked element. Again, use $(this).closest('section') to find the entire section and hide that.

With the click handlers defined in your JavaScript, you don't need the onclick attributes in your HTML. Remove them.

Putting it all together:

 $('.pageNext').on('click', function showNext() { // cache DOM lookups when possible const $currentSection = $(this).closest('section'); $currentSection.next('section').show(); $currentSection.hide(); }); $('.pagePrev').on('click', function showPrev() { const $currentSection = $(this).closest('section'); $currentSection.prev('section').show(); $currentSection.hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="Page1" class="page" style=""> <p>Content of page 1</p> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page2" class="page" style="display:none"> <p>Content of page 2</p> <h3><span class="pagePrev">Previous</span></h3> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page3" class="page" style="display:none"> <p>Content of page 3</p> <h3><span class="pagePrev">Previous</span></h3> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page4" class="page" style="display:none"> <p>Content of page 4</p> <h3><span class="pagePrev">Previous</span></h3> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page5" class="page" style="display:none"> <p>Content of page 5</p> <h3><span class="pagePrev">Previous</span></h3> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page6" class="page" style="display:none"> <p>Content of page 6</p> <h3><span class="pagePrev">Previous</span></h3> <h3><span class="pageNext">Next</span></h3> </section> <section id="Page7" class="page" style="display:none"> <p>Content of page 7</p> <h3><span class="pagePrev">Previous</span></h3> </section> 

This also translates easily, if more verbosely, to vanilla JavaScript:

// $('.pageNext').on('click', function showNext() {
document.querySelectorAll('.pageNext').forEach(element => {
  element.addEventListener('click', function showNext(event) {
//  const $currentSection = $(this).closest('section');
    const currentSection = event.target.closest('section');
//  $currentSection.next('section').show();
//  (not a direct translation but it works since you don't have
//  non-section siblings)
    currentSection.nextElementSibling.style.display = 'block';
    // or previousElementSibling for $.prev
//  $currentSection.hide();
    currentSection.style.display = 'none';
  });
});