CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Sole
Sole

Reputation: 3350

jQuery Next button on multiple pages

Previously I have this: Jquery to display next button once a input button is clicked

Now I need to get this button on the next slide to function in the same way as the first slide. Please see my code:

DEMO CODE Just a snipped below

    <input type="radio" name="options" id="option2" name="1" class="a"> <span class="label num" style="font-size:18px; margin-bottom:15px; border-radius:0px;">A</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </label>

  <label class="btn btn-default">
    <input type="radio" name="options" id="option2" name="1" class="b"> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">B</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </label>

  <label class="btn btn-default">
    <input type="radio" name="options" id="option3" name="1" class="c"> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">C</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </label>

   <label class="btn btn-default">
    <input type="radio" name="options" id="option3" name="1" class="d"> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">D</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </label>

</div>
<br / >
<br / >

<div align="left">
<button id= "nextbtn" class="btn btn2 btn-default" name="next" style>Next</button>
</div>
    </div>

Upvotes: 0

Views: 682

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

Your code is working for sliding, issues is in the next button display. As you have used below code to show/hide button where you have used id="nextbtn" for both next button.

$(function(){
  $('#nextbtn').hide();
  $('input:radio').change(
    function(){
       $('#nextbtn').show();
    }
);

In jQuery, you must not use same id for multiple elements, so either remove it or rename it to unique ids.

lets say id="namebtn1" and id="namebtn2", and modify below code 

$("button[name=next]").click(function (e) {
        //hide current button after click
        $(this).hide();
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).fadeIn(); // show next
    });

  $(function(){
     //hide button
     $('button[name=next]').hide();
     $('input:radio').change(
        function(){
         //show button for clicked div
         $(this).closest('div[class^=item]').find('button[name=next]').show();
     });          
  });

jsfiddle demo

NOTE - you have $(document).ready(... and $(function(){.. in your code, both are meant for same purpose i.e. run script after all DOM elements loads and no need to put multiple time (though your code will work).

So remove either of them and put whole script inside one (i.e. $(document).ready(... or $(function(){.. ) as shown here

Upvotes: 1

hint
hint

Reputation: 51

updated, see http://jsfiddle.net/dvgxga2j/18/

$(document).ready(function () {
    var divs = $('.wrapper>div');
    var now = 0; // currently shown div
    divs.hide().first().fadeIn();
    $("button[name=next]").click(function (e) {                
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).fadeIn();
        $(e.target).hide();
    });
});

you can just move the next button outside and hide it after showing the next div

Upvotes: 0

Related Questions