Jquery click function with same button display different text

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/

João Silva · Accepted Answer · 2012-10-20 14:03:57Z

4

$("#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.

edited Oct 20, 2012 at 14:03

answered Oct 20, 2012 at 13:49

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

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

2 Comments

Tolga Arican Over a year ago

it will have bug, because will not find any next element after last element.

João Silva Over a year ago

@TolgaArican: OP did not specify that he wants that behaviour, but I've provided an example to do it with a small modification.

charlietfl · Accepted Answer · 2012-10-20 13:57:44Z

1

In order to revert back to beginning you need to check if there is a next otherwise use the first. toggle() method will reverse display of an element

$("#slider1next").click(function() {
    var $curr= $('.text:visible');
    var $next= $curr.next().length ? $curr.next() : $('.text').first()
    $curr.add( $next).toggle();  
});

DEMO http://jsfiddle.net/XQJFQ/

answered Oct 20, 2012 at 13:57

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Tolga Arican · Accepted Answer · 2012-10-20 13:57:35Z

0

You have to get somehow which one is selected. Now you are only showing all texts. Then hiding only first one.

First change first element of html. You don't need to define id's. text class is enough.

<p class="text active">This is the first text</p>

Then change your click function

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

    // get current
    var cur = $('.text.active').index('.text');

    // calculate next
    var next = cur+1 % $('.text').length();

    // hide all
    $(".text").hide();

    // show next
    $($('.text')[next]).show();

    // update active
    $('.text.active').removeClass('active');
    $($('.text')[next]).addClass('active');
});

answered Oct 20, 2012 at 13:57

Tolga Arican

4763 silver badges14 bronze badges

Collectives™ on Stack Overflow

Jquery click function with same button display different text

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related