Question

I am trying to make prev – next sliding between content on a page. I have the following markup:

<div class="right">
     <a href="javascript:;" class="light-button" id="previous-button">Previous</a>
     <a href="javascript:;" class="light-button" id="next-button">Next</a>
 </div>
 <?php foreach ($chapters as $chapter) : ?>
 <div id="chapters-container-<?php echo $chapter->id; ?>" style="display: none">
     <div class="left">
         <h1 class="hmc"><?php echo $chapter->title; ?></h1>
     </div>
     <ul class="attachments scroll-pane">
     <?php foreach ($chapter->files as $file) : ?>
     <!--video zone-->
         <?php if ($file->extension == '.mpeg') : ?>
         <li class="wide">
             <img src="" />
             <span class="duration hmc"><?php $file->duration; ?></span>
             <h1 class="hmc">The title is a title</h1>

         </li>
         <?php endif; ?>                              
     <?php endforeach; ?>
     </ul>
</div>
<?php endforeach; ?>
</div>

Basically I generate some content dynamically with PHP. I have wrapped each content generated in a div and I do not display it only with jQuery.
Now I tried doing something like:

$('body').on('click', 'a#next-button', function(){
    $('#chapters-container-').next();
});

but ofc it is not working as I want it. How can I make the content change when i toggle between prev and next button based on the markup I am generating.

Answer 1

I think that you don’t get what

$('#chapters-container-').next(); 

does. This, according to the documentation,

Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.

so you are just selecting the next element after the element with id = chapters-container-

Youy should do something like:

$('body').on('click', 'a#next-button', function(){ 
  var visisbleContainer = $('div[id^=chapters-container-]:visible');
  visisbleContainer.next().show();
  visisbleContainer.hide(); 
});