Jquery next prev with text

Question

Hello everyone I'm trying to do that I have two buttons which are call "next" and "prev" which provides hide and show text. My first text must be display like "1" when I click prev button it will come 2 and press again until fourt text whiich I call "4" Here is html part :

<button id="slider1next" >Next</button>
<br>
  <p class="text" id="first_one">1</p>
    <p class="text" id="second_one" style="display:none">2</p>
    <p class="text" id="third_one" style="display:none">3</p>
<p class="text" id="fourth_one" style="display:none">4</p>
<br>
<button id="slider2next" >Prev</button>

I want to press next button again and I want to display first text which is call "1" and also I click prev button it must show previous text

Here is my script

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

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

And also you can see http://jsfiddle.net/ganymedes/scXQR/

What exactly is the problem? Do you want to go back to 1 after 4? — Marco Johannesen
jsfiddle.net/ganymedes/scXQR please click next button until 4 then press again nothing will be display I want to press again the next button and show 1 and press prev button show 4 — learnmore

Mohan Mohan · Accepted Answer · 2012-10-21T11:30:46

Try using selector in Next Method:

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

Here is edit to your code http://jsfiddle.net/scXQR/5/

Hope this helps.

Jquery next prev with text

1 Answers