Jquery click function with button and text

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

So you want that the second button has the opposite functionality of the other like that : jsfiddle.net/7kxAE/3? I am just using .prev() instead of .next() — sdespont
– sdespont, Commented Oct 21, 2012 at 8:44

Ram · Accepted Answer · 2012-10-21 08:47:59Z

2

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/

answered Oct 21, 2012 at 8:47

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

learnmore Over a year ago

Thank you but when I click the second button you know the fourth hide then third appear, third hide and second appear but when I click again I dont want the first text hide I mean the first text like a constant text

learnmore Over a year ago

Yes like that but for your query I click he firts button when I see "This the fourth text" then I click same button nothing will appear then I click the second button which is has prev property doesnt not get ant text could you look your query

Collectives™ on Stack Overflow

Jquery click function with button and text

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related