ToggleClass not working correctly please help

[Jerrell_B]

I would like to change the main paragraph font size from it's default 14px to 16px when anchor tag "large-type" is clicked.

I have attempted to do this with the CSS and jQuery code below but it is not working correctly. The strange thing is when I add font weight bold to the "large" class the code below works.

Any Help and suggestions are appreciated!

Thanks

CSS code:

/*default size */

#mainContent p{
                          font-size: 14px;
                          font-family: sans-serif, Arial,"MS Trebuchet";
                          line-height: 16px;
}
	
/* large-type icon - increases body font size */

.large {
	    font-size: 16px; 
            font-family: sans-serif,Arial,"MS Trebuchet";
}

jQuery code:

$(function(){

$('a.large-type').click(function() {
    $('#mainContent p').toggleClass('large');
         return false;
     });
});

[Jerrell_B]

I have looked all over the internet and can't find a solution to this problem.

[anthoang]

perhaps you could try the .removeClass() and .addClass() instead?

    $(dom).removeClass("large");
    $(dom).addClass("large");

[Jerrell_B]

Hi Anthoang,

Thank you for help. I have tried using the addClass() and removeClass methods but they don't seem to work unfortunately.

$(function(){
	$('a.large-type').click(function() {
		if($('mainContent p').addClass('large')){
			$(this).removeClass('large')
		} else {
			$('mainContent p').addClass('large');
		};
		
	});
	
});

[Jerrell_B]

I was able to solve this issue by defining the following in your css.

#text { font-size:14px}
#text.large{ font-size:16px}