Toggle-O-Matic Class

How It Works...

Apply a class to any ID'd element, and use this extension to toggle back and forth between the original class (if any) and the assigned class with each action. For example, you could have:

<p id="myParagraphID" class="firstClass">Here
		is some text for my paragraph</p>

When you apply the extension to change that paragraph's class to secondClass, essentially the browser treats it like this:

<p id="myParagraphID" class="secondClass">Here
		is some text for my paragraph.</p>

Here's an example of some simple CSS:

.firstClass {
  color:#FFF; 
  background:#9A9CA6;
}
.secondClass {
  color:#000; 
  background:#E0DFE3;
}

Example: Toggle It!

If you applied Toggle-O-Matic Class to a hyperlink, as described in the code examples above it would look like this:

Here is some text for my paragraph.

Now every time you click the Toggle It! link, you'll see the paragraph toggle back and forth between its original class and the one assigned to it by Toggle-O-Matic Class. It doesn't have to be this simple either; so long as the browser supports the CSS you write for each of the classes, you can create all sorts of great effects.

Note

If there is no class applied initially to the element, Toggle-O-Matic Class toggles between the assigned class and no class at all.