CODEWITHSUNDEEP
jquerycss
Overmars
Overmars

Reputation: 101

Using JQuery to toggle between styles

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');
    });
});

Upvotes: 10

Views: 30190

Answers (5)

Cos Callis
Cos Callis

Reputation: 5084

Try this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .aParagraph
        {
            width:700px;
            font-family:Verdana;
            font-size:15pt;
            border: 3px inset green;
        }
        .blueParagraph
        {
            color:Blue;
        }
        .redParagraph
        {
            color:Red;   
        }

    </style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        });



        function colorRed() {
            var P = $("#theParagraph");
            P.removeClass("blueParagraph");
            P.addClass("redParagraph");
        }

        function colorBlue() {
            var P = $("#theParagraph");
            P.removeClass("redParagraph");
            P.addClass("blueParagraph");

        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <input type="button" id="makeRed" onclick="colorRed();" value="Turn Red" />
    <input type="button" id="makeBlue" onclick="colorBlue();" value="Turn Blue" />
    <div id="theParagraph" class="aParagraph redParagraph">
         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! 
    </div>
    </form>
</body>
</html>

Upvotes: -1

Caspar Kleijne
Caspar Kleijne

Reputation: 21864

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

Upvotes: 12

Mohammad Ali Akbari
Mohammad Ali Akbari

Reputation: 10395

I think you need something like:

Styleswitch stylesheet switcher built on jQuery http://www.kelvinluck.com/2009/07/jquery-styleswitch-now-with-toggle/

Upvotes: -1

Guidhouse
Guidhouse

Reputation: 1426

Look at this post pls. jquery background from image to color and back again

i hope it will help :-)

it is basicly the same as what I understand you are looking for.

In stead of changing between an image and a colour, you can make the styles red/blue.

Upvotes: -1

Mark Coleman
Mark Coleman

Reputation: 40863

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

Upvotes: 4

Related Questions