HomeОбразованиеRelated VideosMore From: Adam Khoury

JavaScript Change CSS Class Style className Toggle Tutorial

370 ratings | 35219 views
Lesson Code: http://www.developphp.com/video/JavaScript/Change-CSS-Class-Style-className-Toggle-Tutorial Learn to change, toggle and swap CSS classes using JavaScript event handling.
Html code for embedding videos on your blog
Text Comments (32)
Dana Lee Gibson (3 months ago)
THANK YOU!!!! Been working all day trying to find simple solution to toggle a CSS class to reverse an image!
L Barrera (5 months ago)
Just Excellent!! one of the best on the internet for this matter. Short but very informative!... Thanks!
nilesh unde (6 months ago)
I was looking for this on the whole internet! Thank You!!!
Daniphord Mwajah (10 months ago)
A well presented video. Short and clear!
AmenoKoyane (1 year ago)
I can't see his CSS
IHLTI (1 year ago)
nice i know :) simple tutorial ,
Mustafi H (1 year ago)
big thanks for this video
Michelle Becker (1 year ago)
And which Programm do you use for your cursor? ^~^ it seens very nice
Michelle Becker (1 year ago)
Which editor you use? It isnt Notepad ++ right? But what is it?
Jason Howard (1 year ago)
awesome video. Thanks
geometricbass (2 years ago)
dude this is a great video. much clearer and straightforward than a lot of what is found on stack overflow. good pace.
Rob Chokehold (2 years ago)
Careful with the .children() thing, on IE<=8 (yeah old, but still used) it will list comments as children as well.
WebPoint (2 years ago)
This is help me a lot :) thanks
Doy Actioncom (2 years ago)
Have you a Video with the same when the 4 DIVs have own classNames = class1a, class1b, class1c and class1d ?
Karim (3 years ago)
Thanks for putting in the time to make these resources! They are super useful for me...so if your goal was to help me specifically, you succeeded. :)
Awesome! This is EXACTLY what I need. I only had one problem: I need many different buttons. Not several like one, but several that are each individual. I tried copying all of the coding and changing "class1" to "class3" and "class2" to "class4" but when I load my site and click the original (class1) it disappears. But my class3 works normal...?
Robbie (3 years ago)
What about if you wanted to change the property of another element ie: in the first example, click the first box and the third box changes (or any other element). Which selector would I use instead of "this"
Johann Dascal (9 months ago)
pls tell me you figured it out XD ???
Workout Routine (3 years ago)
This is great! but how do i apply the last example if it in a list.. <ul>   <li class=class2> </li>   <li class=class1> </li>   <li class=class1> </li>   <li class=class1> </li> </ul> Thankyou!
ruupsel12 (4 years ago)
can you also do this with .animation()?
郭珦珲 (4 years ago)
Awesome tutorial ! Thank you very much !
Attollo (5 years ago)
Great video bro!! I can't begin to explain the level in which this video helped me. #Mad Respect
Alex Aranda (5 years ago)
Adam thanks for posting this. super helpful. 
yannis art (5 years ago)
Thank you, Adam!!
Watana Samart (5 years ago)
Thanks so much Adam
Mehrshad Darzi (5 years ago)
please one example "media Query" for responsive in toggle java add or remove class???
sdhpCH (5 years ago)
... and once again thx Adam for making us better coders. To me there is no one out there more inspiration to do a better job and move forward then you are. And I don't know HOW you do it, but you are bringing up every time something that I need right in that moment when you publish a tutorial :D
Toby Hodkinson (5 years ago)
Great, I love these "jquery" is overkill videos!
Badr (5 years ago)
Great tutorial, Thanks Adam (;
Ben Stuijts (5 years ago)
Simple, but very nice video. I think this will help a lot of people out there!
Adam Khoury (5 years ago)
Gregory Allen Mansheim (5 years ago)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.