Enlarge text three times and back to initial size

I have link and div element. After click to the link I want to enlarge text inside the div. It's possible enlarge text three times and for the fourth time size has to back to the initial size

$('.bigger').click(function () {
  ('#outer-wrap').on('click', function () {
    $(this).css("font-size", "115%")
<a class="bigger" href="#">Some text</a>

<div id="outer-wrap">paragraph</div>


For this you don't need to add an on click event handler to outer-wrap. Instead keep an array of the sizes you want and a variable for the current number of clicks and change the size according to how many times the link was clicked.

var sizes = ["100%","115%","130%","145%"];
var count = 1;

$('.bigger').click(function () {
  $('#outer-wrap').css("font-size", sizes[count]);
  count = (count+1) % 4;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="bigger" href="#">Some text</a>

<div id="outer-wrap">paragraph</div>


var i=0;
$('.bigger').click(function () {
  i=(i+1) %4;
  $('#outer-wrap').css("font-size", (100+15*i)+"%");


This cycles through i from 0 to 3, and uses that number to increment the zoom level (100%, 115%, 130%, 145%).

This makes it quite elegant and also a bit more dynamic (you can change the 4 behind the modulo without having to change anything else to change the number of steps, and the 15 in the increment to change how much the font is being enlarged by on every click.)

Need Your Help

How to make text-align:right, display:box and box-align:center work together for short text?

text css3 centering text-align

I was wondering why short text does not seem to be affected by the text-align property once the following CSS3 technique for centering the text is applied (see the answer):

ember.js clickable links inside clickable div

javascript ember.js

I've found a few answers for this specific to jQuery but nothing related to Ember.Js. I'm pretty new to Ember so I may be missing something obvious so my bad if so.