Executing the next function in the same button

Question

I`m working on a interactive story using Jquery, my question is, since the 1st text is loaded on the function scene1, after the button .slideBt1 is clicked, how can the 2nd text function be executed by the same button, working like a next button?

function scene1 () {
$("p").text("Hi! My name is Lombado");

//1st text
$('.slideBt1').click(function(){
$('p').text("Nice to meet you!").hide().fadeIn(1000);
});

//2nd text
$('.slideBt1').click(function(){
$('p').text("what is your name").hide().fadeIn(1000);
});

Answer 1

Use some flag to toggle between them

function scene1() {
  $("p").text("Hi! My name is Lombado");
  $('.slideBt1').click(function() {
    if (!this.toggle)
      $('p').text("Nice to meet you!").hide().fadeIn(1000);
    else
      $('p').text("what is your name").hide().fadeIn(1000);
    this.toggle = !this.toggle;
  });
}

$("p").text("Hi! My name is Lombado");
$('.slideBt1').click(function() {
  if (!this.toggle)
    $('p').text("Nice to meet you!").hide().fadeIn(1000);
  else
    $('p').text("what is your name").hide().fadeIn(1000);
  this.toggle = !this.toggle;
});

<!-- begin snippet: js hide: false -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p></p>
<button class="slideBt1">click</button>

If you want to remove click handler after reaching the last text,

$("p").text("Hi! My name is Lombado");
var abc = function() {
  if (!this.toggle)
    $('p').text("Nice to meet you!").hide().fadeIn(1000);
  else {
    $('p').text("what is your name").hide().fadeIn(1000);
    $('.slideBt1').off('click', abc);
  }
  this.toggle = !this.toggle;
};
$('.slideBt1').on('click', abc);

<!-- begin snippet: js hide: false -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p></p>
<button class="slideBt1">click</button>