<p>Click on the "Hello Wordl" to toggle the text.</p>

<div class="toggle-text">
  Hello World
</div>
.toggle-text {
  background-color: lightblue;
  padding: 30px;
  display: inline-block;
  font-size: 3em;
  cursor: pointer;
}
View Compiled
jQuery.fn.extend({
  toggleText: function (a, b) {
    var isClicked = false;
    var that = this;
    this.click(function () {
      if (isClicked) {
        that.text(a);
        isClicked = false;
      } else {
        that.text(b);
        isClicked = true;
      }
    });
    return this;
  }
});
jQuery(".toggle-text").toggleText("Hello World", "Bye!");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js