toggle 2 buttons that change font size

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 [ ]

<style> html { font-size:13px; } html.big { font-size:18px; } html.default { font-size:13px; } </style> <a href="#">bigger</a><br> <a href="#">default</a><br> texttexttexttext<br> $(function() { $('.font_resize').on('click', function() { $('html') .attr('class', '') .addClass($(this).data('size')); }); }); 

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=""></script> <a href="#">bigger</a><br> <br> texttexttexttext

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).