Question

Hello eveyone I’m trying to using click function.When user clicks the button, second text will appear and the first one will be display none and then user click again 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. Here is my function:

$("#slider1next").click(function () {
    $(".text").css('display', '');
    $("#first_one").css('display','none');                   
});

here is the 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>​

Also you can see there http://jsfiddle.net/ganymedes/7kxAE/

Answer 1

$("#slider1next").click(function () {
    $(".text:visible").hide().next().show();
});

In other words, with every click, you hide the :visible text, and show the next one.

DEMO.

If you want to cycle back to the first one when you reach the last p, use the following instead:

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

DEMO.
​