Comradeo Comradeo - 6 months ago 17
PHP Question

Click button show different text, repeat first text

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>


JavaScript:



$("#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();
});


I want to make it where the text is shown, but after the last text, it repeats the first text.

Trying to make something like this

If there's a better way to do this, other than using JavaScript and HTML, please let me know.. But
JavaScript
and
HTML
is the only way I can think of, an alternative to JS functions would be
jQUERY
. Help? ;-;

Looking for suggestions with the use of
PHP
, too, maybe to mock the code's intended for what I am trying to re-create using a different set of languages.

Answer

var count = 0;
$("#sliderNext").click(function() {
  count++;
  if (count < $('.text').length) {
    $(".text:nth(" + count + ")").show().prev().hide();
  } else {
    $(".text:first").show();
    $(".text:last").hide();
    count = 0;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id="sliderNext">Next</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>

Comments