jQuery CSS Class Modification

Introduction: This tutorial is on how to set the configuration of CSS classes for HTML elements via jQuery. CSS Classes: CSS Classes are used to give styling for display elements held within the HTML structure of a .html/.php file. CSS stands for Cascade Style Sheet, and you can use classes or IDs as styling containers to give properties to HTML elements with the matching class/ID. Identifiers: To identify a CSS class, you use a dot; . To identify a CSS ID, you use a hashtag; # This is important to know for when we need to reference our HTML elements via jQuery/Javascript later. HTML: We are going to be using the following basic HTML file template to show how to add/remove CSS classes for specific HTML elements... HTML elements or PHP code which adds directly to the display of the page, should be added within the 'body' tags of the HTML file. While background code and references should be added to the 'head' tags of the HTML file. Div: Our div we are going to be using for this example is going to contain text of 'This is my div'. An ID of 'editDiv', and a default class of 'small'... CSS: Now we are going to create two basic CSS classes which we are going to swap between via jQuery later on within this tutorial. First we have a 'small' class which sets the width and height of the div to 100 each, and a background color of red... Next, we create a second class named 'wide'. This sets the width of the class/div to 300 pixels, and the background colour to blue. Leaving the height as '100px' (100 pixels)... As our CSS does not directly add elements to our page's display, the surrounding 'style' tags and it's inner contents, should be added to the 'head' tags of the HTML page. jQuery: Again, Javascript/jQuery in this case, should be added to our 'head' tags because it does not directly add content to our HTML/PHP page. Before we can start using jQuery, we first need to include the required libaries. These can be found from the official jQuery home page, here; http://jquery.com/download/ Listeners: Next, we want to now create our jQuery. First we add the document ready function to our head tags... We do this because it will automatically be invoked/ran once the page is loaded. Within the function, we add a listener on our div. I have explained internal listeners in my previous tutorial, found here; http://www.sourcecodester.com/tutorials/javascript/7788/jquery-internal-listeners.html Please note, we use the hashtag because we are referencing our div via it's ID of 'editDiv'. Class Modification: Now, we are ready to edit the CSS of our div. First we want to get the current CSS class of our div... We can then messagebox/alert this to ensure it is working correctly. It should present 'small'... Once it is showing 'small', we know that it is correctly gathering the class of the div. Now we can check if the class is equal to 'small'... If the current class ('prevCSS') is 'small', we want to first use the built in jQuery function 'removeClass' to remove the class 'small' from the div. We then use the built in 'addClass' jQuery function to add our 'wide' CSS class to our div... If it is not 'small', it must be 'wide' and so we remove the 'wide' CSS class, and add the 'small' class... Finished! Here is the full source code....