Using JQuery to toggle between styles

Question

Good afternoon,

I am searching for a way to Toggle between styles:

Example:

I have two styles(classes), one makes the paragraph red and the other makes the paragraph blue. I only want to use JQuery to call the styles, not to hold the styles itself.

So when I click a button, the paragraph turns red, when I click again, it turns blue.

Again, I would rather have the style separate and given class names and have JQuery switch between the two.

I have search the net but keep coming up with show/hide examples where the styles are embedded into the JQuery function.

Any ideas will be appreciated!

Overmars

Hello everyone! This is what I did, as I mentioned I was simply trying to toggle between two styles. One styles does something, example: Make a text red or change an image and the other style makes another thing happened.

Thanks every one for your time a patience. You all do make a difference.

I found the answer in my JQuery Cook Book. Chapter 3. Event Handling Page 69. Here is the code:

$(document).ready(function() {
    $('.normalStyle').click(function(){
        $(this).toggleClass('newStyle');
    });
});

Answer 1

use toggleClass

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.

$('div.foo').toggleClass(function() {
  if ($(this).is('.blue')) {
    return 'red';
  } else {
    return 'blue';
  }
});

This example will toggle the blue class for <div class="foo"> elements if their parent element is of class red; otherwise, it will toggle the blue class.

or even shorter:

 $('div.blue').toggleClass('red');

a toggled class outrules the initial color, (red class is just added) as used in:

 $('div.blue').click(function() {
     $(this).toggleClass('red');
 });

fiddle here

or with really pure class replacement (the blue is removed and the red is added and vv):

$('div').click(function() {
    $(this).toggleClass('red blue')
 });

fiddle here

Answer 2

You can use .toggleClass() to toggle on and off your class to change your text color.

$("#someButton").click(function(){
  $("#someP").toggleClass("makeRed");
});

Simple example on jsfiddle