On click, hide one element and show another

by Al-Mamun Talukder

HTML

<div class="buttons">
  <a id="show-annual" href="#">Annual Price</a>
  <a id="show-monthly" href="#">Monthly Price</a>
</div>

<div class="pricing">
  <div class="monthly-price">$4.99</div>
  <div class="annual-price">$49.99</div>
</div>

CSS

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

.pricing {
  padding: 15px;
  font-size: 20px;
  margin-top: 10px;
  background-color: #ccc;
  width: 100px;
  text-align: center;
}

JavaScript

$(document).ready(function() {
  $(function() {
    $(".monthly-price").hide();
    $("#show-monthly, #show-annual").bind("click", function() {
      $(".monthly-price, .annual-price").hide();
      if ($(this).attr("id") == "show-monthly") {
        $(".monthly-price").show();
      } else {
        $(".annual-price").show();
      }
    });
  });
});