toggle 2 buttons that change font size

user_1833620 0
Viewed 777

I have 2 buttons, and each button can change the body font size. I want to make the buttons that toggle. This is what I tried so far here [ https://jsfiddle.net/a6oscu8n/ ]

<style>
html { font-size:13px; }
html.big { font-size:18px; }
html.default { font-size:13px; }
</style>

<a href="#" data-size="big" class="font_resize">bigger</a><br> 
<a href="#" data-size="small" class="font_resize">default</a><br> 


texttexttexttext<br>  

$(function() { 
  $('.font_resize').on('click', function() {
    $('html')
      .attr('class', '')
      .addClass($(this).data('size'));
  }); 
});
jquery
2 Answers

You can toggle button using text. You also toggle between two class like below.

$(function() {
  $('.font_resize').on('click', function() {
    $(this).text(function(i, text) {
      return text === "bigger" ? "default" : "bigger";
    })
    $('html').toggleClass("small big");
  });
});
html {
  font-size: 13px;
}

html.big {
  font-size: 18px;
}

html.default {
  font-size: 13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-size="big" class="font_resize">bigger</a><br>
<br> texttexttexttext

user_9651460

if you only have one button, then you can use Jquery toggleClass to do the trick, like this:

$(function() { 
  $('.font_resize').on('click', function() {
    $('html')
      .attr('class', '')
      .toggleClass('big', !$('html').has('big'));
  }); 
});

This will toggle the class between 'big' and 'nothing' (which will be default).

user_57416430
Related