Question

Hello eveyone I’m trying to using click function. When the user clicks the button, a second text will appear and the first one will be display none and then user clicks again using the same button this time third text will appear and the second text will be display and finally click the same button again fourth text will appear third one display none.

I have another button that user clicks this button the fourth text will be display none and the third text will appear and click again this button the third text will display none second text will appear and finally click this button second will diplay none the first text will appear. Here is my function:

 $("#slider1next").click(function () {

         var $next = $(".text:visible").hide().next();
         $next.length ? $next.show() : $(".text:first").show();

 });

 $("#slider2next").click(function () {

         var $next = $(".text:visible").hide().next();
         $next.length ? $next.show() : $(".text:first").show();

 });

​
Here is my html:

<button id="slider1next" >Clickme</button>
  <p class="text" id="first_one">This is the first text</p>
    <p class="text" id="second_one" style="display:none">This is the second text</p>
    <p class="text" id="third_one" style="display:none">This is the third text</p>
<p class="text" id="fourth_one" style="display:none">This is the four text</p>

<br/>
<button id="slider2next" >Clickme</button>

And also you can see there

http://jsfiddle.net/ganymedes/7kxAE/2/

Please help me

Answer 1

You can use prev method and :last selector:

$("#slider1next").click(function() {
    var $next = $(".text:visible").hide().next();
    $next.length ? $next.show() : $(".text:first").show();
});

$("#slider2next").click(function() {
    var $prev = $(".text:visible").hide().prev();
    $prev.length ? $prev.show() : $(".text:last").show();
});

http://jsfiddle.net/dq6rf/