Question

I have a font resizer that needs to be contained in one link. eg. show text link “Larger Type” and switch to text link of “Smaller Type” when clicked. I am not sure why it will toggle the class “plus/minus” but it will not switch the text or call the font resize function after the else statement?

Currently, it works the first click to resize the text and add the minus class but after that it does nothing.

http://jsfiddle.net/infatti/P6SVv/

var targetContainers = $('.two-thirds');
var newLargerSize = 16;
var newSmallerSize = 14;
$('.resize-font a').click(function(){

if ($(this).hasClass('plus')) {

    $(targetContainers).css('font-size', newLargerSize);

    $(this).text('Smaller Type').toggleClass('minus');

} else {

    $(targetContainers).css('font-size', newSmallerSize);

    $(this).text('Larger Type').toggleClass('plus');

};

});

Answer 1

Your condition is not calibrated with your toggle.

You check if the a has the class plus, but if it does, you never remove the plus, you remove (or add) the minus.

You should toggle plus always, to remove it when it exists, and add it when it doesn’t:

$('.resize-font a').click(function() {
   var hasPlus = $(this).hasClass('plus');
   $(targetContainers).css('font-size', hasPlus ? newLargerSize : newSmallerSize);

   $(this).text(hasPlus ? 'Smaller Type' : 'Larger Type').toggleClass('plus');
});

If you need the minus for styling, you should toggle both, at all times:

$(this).text(hasPlus ? 'Smaller Type' : 'Larger Type').toggleClass('plus minus');