Fonts' Resizer - how to make buttons that will change font size of all tag in the html

Question

I want to add widget to my site that can change (by buttons) the font size of all the <p> elements of the html. I took this code from pen code and tried to edit it - the concept is making an array of all the p elements, then making an array of all the font-size of them, and finally by click the default button (after will apply it to all buttons with adding amount of pixels) the font need to back to default size of it.

Something is not working and I'm not sure what it is.

This is the original code:

$(document).ready(function() {

  $("#small").click(function(event) {
    event.preventDefault();
    $("h1").animate({
      "font-size": "24px"
    });
    $("h2").animate({
      "font-size": "16px"
    });
    $("p").animate({
      "font-size": "12px",
      "line-height": "16px"
    });


  });

  $("#medium").click(function(event) {
    event.preventDefault();
    $("h1").animate({
      "font-size": "36px"
    });
    $("h2").animate({
      "font-size": "24px"
    });
    $("p").animate({
      "font-size": "14px",
      "line-height": "20px"
    });

  });

  $("#large").click(function(event) {
    event.preventDefault();
    $("h1").animate({
      "font-size": "48px"
    });
    $("h2").animate({
      "font-size": "30px"
    });
    $("p").animate({
      "font-size": "16px",
      "line-height": "20px"
    });

  });

  $("a").click(function() {
    $("a").removeClass("selected");
    $(this).addClass("selected");

  });

});

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
}
body {
  background: #e7e7e7;
}
#wrapper {
  width: 400px;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, .25);
}
#controls {
  float: right;
  padding: 2px;
  width: 25px;
  background: #333;
  position: fixed;
  margin: 0 0 0 440px;
  text-align: center;
  transition: .25s ease-out;
}
#controls a {
  font-size: 24px;
  color: #aaa;
  display: block;
  font-weight: bold;
  padding: 5px;
}
#controls a:hover {
  color: #fff;
  background: #000;
  transition: .25s ease-out;
}
a.selected {
  background: #000;
  color: #fff !important;
}
#small {
  font-size: 10px !important;
}
#medium {
  font-size: 14px !important;
}
#large {
  font-size: 18px !important;
}
.small {
  font-size: 75%;
}
h1 {
  font-size: 36px;
  font-weight: bold;
}
h2 {
  font-size: 24px;
  margin: 10px 0;
}
p {
  font-size: 14px;
  line-height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="controls">
    <a href="#" id="small">A</a>
    <a href="#" id="medium" class="selected">A</a>
    <a href="#" id="large">A</a>
  </div>
  <h1>Header</h1>
  <h2>Subheader</h2>
  <p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.
  </p>

</div>

Answer 1

have you load jquery.js before that jquery script ?

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//your code here
</script>