jQuery Basics: Adding, Changing & Removing Classes from Elements

To start off with let’s look at manipulating classes. The following tricks are used throughout more complicated jQuery/Javascript apps to help create visual cues & change the styling of elements. Think jQuery Tabs. A ‘active’ class is added to the current tab to show it is currently selected. Now, before we look at how to add a class let’s take a look at a simple demo.

The demo is a simple visual demo, and while it isn’t particularly useful, the code that runs it is. Before we see how that demo works though, let’s start off with a simpler example.

Adding Classes

Adding classes is extremely simple. You just use:

Doing that would add the class myclass to all hyperlinks on the current page. A useful example of why you might want to add a class like this might be to identify outgoing links. Provided you always use relative links for internal hyperlinks you can use something like:

To add the class outGoing to all external hyperlinks on a webpage.

Removing Classes

To remove a class is also simple. You just use:

That would find all elements with the class hidden and then remove it. It can be useful for all sorts of things. One of them is making things that have been hidden, visible again.

Alerting Classes

This is the one where those starting out get confused. You are best off not even trying to alter a class. Instead just remove it and add the alternative all in one go. For example:

See it’s all actually fairly easy, once you know how. Let’s get back to our demo and see how that works. Like I said, it uses the same techniques described here, but in a slightly different way.

Demo Explanation

First let’s take a look at the code from the demo. First the HTML

Fairly simple. If you need to know what it produces, then check the demo out again. I’d advise keeping it open in another tab so you can flip between this tutorial and the demo as reference. The important thing to note are that the classes on the lights & the id’s for the links are identical. Also the off class just makes the lights look as if they are off when the page loads.

Next up the jQuery.

As always we have our DOM ready function, I’ve provided the WordPress version as well for those that need it.

We store a link to the element that contains the elements that are to have their classes manipulated. This is mainly so we can easily change it at any time as it isn’t hardcoded throughout the code. We also create a variable to be used as a toggle. I know it can be done using toggleClass (Thanks Gavrisimo), but I want to show how to create a custom toggle for those that don’t know how. It is also important to note the use of var when declaring variables, if you do not use it the variable will become global, that is useless to us so using var means the variable stays local to the current function.

Now we look for all the hyperlinks inside of the links element, these are our triggers to switch the lights on & off, and we make a click event on them.

We grab the current elements id. Please note, prop is the replacement for attr please replace as needed if using an old version of jQuery.

Now this function simply checks our toggle variable (on) to see if the light is on or off. If it’s on, it finds the element with the current ID as it’s class (remember we named the classes & ID’s the same?) and adds the class off, we also set our toggle variable to false as the light is now off. If it’s off we simply do the opposite.

You may be thinking that this code is quite complex for doing something so simple. Well, I guess it is. You could just write three different click events and they would work, however they would be a pain to change at a later date & if you have a lot of links it becomes a mess. This code will work regardless of the amount of links provided you keep to the convention of having the ID’s & classes named the same.

Again there is also a much neater & smaller way to do this:

Thanks to Gavrisimo for posting this code. However, as I said previously, I wanted to show how to make a custom toggle system for those that haven’t learnt how to create one yet. If you just need the code though the above is perfect.

I hope this tutorial has helped you whether you are a beginner or advanced coder. If you have any questions, or suggestions please let me know. Also if you have any small pieces of work (WordPress/jQuery related) or your having problems with WordPress, check out my Hire Me page and I might be able to help you.

ClassesCSSIDjQuery