Question

I have a list structure like this:

  <ul id="part">   
    <?php 
      $i=0; 
      foreach ($q as  &$value):
        $i++;
        $quid = $value->q_id;
        $ans= $this->mem->get_ans($quid);
        echo '<li id="div'.$i.'" class="ques" style="display: none;">';
        echo '  <h2>'.$i.' . '.$value->question.'</h2>';              
                foreach($ans as $answer):
                  echo '<label>';
                  echo '<input type="checkbox" value="'.$answer->ans_id.'" />';
                  echo $answer->ans_name;
                  echo '</label>';
                endforeach;
        echo '</li>';
      endforeach; ?>
      <button id="next">Next</button>
    </ul>

I want the following: When someone clicks the button #next, then it will show the next list item and further on. How can I achieve this with jQuery?

Answer 1

Move your <button> tag outside of <ul> only <li> (list items) are valid inside an unordered list.

The JavaScript (using jQuery) needed to do what you are asking is below:

$(function() {

    //cache the items for quicker access       
    var items = $('ul#part li');

    //bind your event to #next
    $('#next').click(function() {

       //Check if no elements are visible yet.
       if(items.filter(':visible').length == 0) {
         items.first().show();
       }
       else {
         //Otherwise, select the last visible one, 
         //then transverse to the next one and show it
         items.filter(':visible:last').next().show();
       }

    });

});