On click, hide one element, show another and change button label

by Al-Mamun Talukder

HTML

<p class="change">
  The annual price is $49.99 only
</p>
<p class="change hidden">
  The monthly price is $4.99 only
</p>
<a id="toggle" href="#">Show Monthly Price</a>

CSS

.hidden {
  display: none;
}

a {
  text-decoration: none;
  padding: 5px 10px;
  background-color: #000;
  color: #fff;
  display: inline-block;
}

JavaScript

$(document).ready(function() {
  $('#toggle').click(function() {
    $('.change').toggle();
    $(this).text(function(i, txt) {
      return txt === "Show Monthly Price" ? "Show Annual Price" : "Show Monthly Price";
    });
  });
});