Font increase

Font increase

HTML

<a href="javascript:void(0)" class="font-button add">+</a>
<a href="javascript:void(0)" class="font-button minus">-</a>


<div class="content">
<h1>
Floated
</h1>
<p>
A segment can appear to the left or right of other content
</p>

</div>

CSS

.content{
  font-size:14px;
}

.font-button{
  padding:10px;
  color:#000;
  background-color:red;
  text-decoration:none;
  font-size:2em;
}

.content h1{
  font-size:1.2em;
}

.content p{
  font-size:1em;
}

JavaScript

var size =  parseInt($('.content').css("font-size"));

$(".font-button").bind("click", function (e) {
    e.preventDefault();
    if ($(this).hasClass("add")) {
        if (size === 21) {
            size = 21;

        } else {
            size = size + 1;
        }

    } else if ($(this).hasClass("minus")) {
        // console.log('size', size);

        if (size <= 16) {
            size = 16;
        } else {
            size = size - 1;
        }

    }
    $('.content').css("font-size", size);
});