ToggleClass not working correctly please help

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:

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:

Code:

---


$(function(){

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

---

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

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

Code:

---

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

---

Hi Anthoang,

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

Code:

---

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

---

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

Code:

---

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

---