It’s day six. We’re going to take a look at the toggle() and toggleClass() methods and how they can be used to essentially turn “off and on” elements or classes.
Day 6: The toggle() and toggleClass() Methods
- Subscribe to the ThemeForest RSS Feed for more daily web development tuts and articles.
>
Samir Tuladhar
December 3rd, 2008
These tutorials are awesome. These even help to the people who don’t have much knowledge about coding. Short, functional and elegant tut.
Thanx a lot.
I’ll be coming back again.
Derek Reynolds
December 3rd, 2008
Another good tutorial!
Have you noticed that the toggle effects can sometimes lead to really jumpy animations? What is the best way to go about troubleshooting this? Perhaps applying affects to nested elements as to not mess with the transition from one class to another (or whatever toggle you may be happening to envoke)?
Thanks for the hard work in putting these together!
Bennie Mosher
December 3rd, 2008
Awesome video. Will be putting this into practice shortly. Keep them coming!
Jeffrey
December 3rd, 2008
@Samir - Glad to hear it! Thank you. That’s my goal.
As I said in the video, I’m happy to keep creating them if you guys will subscribe to the RSS feed.
Ulf Elfving
December 4th, 2008
Hi Jeff!
I just love this videos (and of course I am a subscriber)
Every morning when I am awake, I check my Google Reader to see if you made some new stuff.
This videos is so great, I havn’t been programming any javasscript before, but now with your lessons and all of jQuery, it now seems that it is not so hard to start making nice looking applicatons.
Keep up the good work
/Ulf
PS
Are you just going to make 20 videos?
I was hoping for at least an even 100 =)
DS
Tom
December 4th, 2008
Good Work Jef!
Cerium
December 4th, 2008
Very nice tutorials, congrats !
Suresh
December 4th, 2008
Hi Jeff, I am geting curious to know more and more. Keep them posted continuously. Your way of teaching is good and appreciating. Keep it up JEFFREY. Well Done.
Jeffrey
December 4th, 2008
@Suresh - Thanks! I appreciate that. I’m glad to hear it’s helping. Feel free to make any tutorial request.
Andris
December 5th, 2008
Hey Jeff. Thanx for this tutorial.
Can I ask you a question about some code that isn’t working as I like it to?
I got a toggler with an downarrow that is an image. when I click on the div where the downarrowimage is in, the image changes to an uparrow. that’s working but then if I click on it again I want it to change back to the downarrow. But this last part ist working with this code:
[PHP]
$(function(){
$(’.objektButton’).click(function(){
$(this).next(’.objektInhalt’).slideToggle(’slow’);
if($(this).children(’img.mehr’).attr(”src”, “../images/pfeil.gif”))
{$(this).children(’img.mehr’).attr(”src”, “../images/pfeilUp.gif”);
}else{$(this).children(’img.mehr’).attr(”src”, “../images/pfeil.gif”);}
});
});
[/PHP]
can you tell me why?
this is my HTML:
[PHP]
some text
some text…
[/PHP]
Andris
December 5th, 2008
I got it.
did it with toggle class and a background-image. much easier. sorry for bothering.
here my code if anyone is interrested:
JS:
$(function(){
$(’.objektButton’).click(function(){
$(this).next(’.objektInhalt’).slideToggle(’slow’);
$(this).children(’span’).toggleClass(’up’);
});
});
CSS:
.objektButton span {
position:relative;
float:right;
width:11px;
height:11px;
background:url(../images/pfeil.gif);
text-indent:-9999px;
margin:0 0 11px 0;
}
.objektButton span.up {
background:url(../images/pfeilUp.gif);
}
kailoon
December 5th, 2008
I’ve did my first ever jquery slideshow in my blog. but it take some times to load. However, I saw others doesn’t have such problem. Any advice?
Bejiita
December 5th, 2008
Hey man thanx for creating these vids. I’m still a beginner in a few aspects. But after watching a few of these I push myself to learn another aspect of jquery everyday. Oh and about subscribing, I did that first. I update my iTunes about every other day to see if theres some new content.
Thanx again man, keep up the good work
Dirk
December 6th, 2008
Thanks a lot for this tutorial!
I can’t find out why this won’t work:
script:
$(document).ready(function() {
$(”a.slideUp”).click(function() {
$(”#box”).slideUp(100);
$(this).toggleClass(”slideUp”);
$(this).toggleClass(”slideDown”);
});
$(”a.slideDown”).click(function() {
$(”#box”).slideDown(100);
$(this).toggleClass(”slideUp”);
$(this).toggleClass(”slideDown”);
});
});
css:
#box {
background-color:#ccc;
width:579px;
height:292px;
}
html:
Link
What I want it to do:
The link should make the box slide up, then change his class from “slideUp” to “slide Down”, so it will make the box slide down the next time it is clicked.
The link changes the class just the way it should (as I can see in firebug), but the second move (sliding down) just won’t work. Maybe you can tell me why?
Dirk
December 7th, 2008
I got it - slideToggle() did it.
This was just too easy to find
Snookerman
December 13th, 2008
Jeff, thanks for everything!
I put this tutorial and the last one together to highlight the list items. I noticed that I cannot highlight an item that was crated by the appendTo function. How can this be solved?
Empee
December 18th, 2008
Hi, I see you too have problems with spam on gmail
great tutorials, thanx, this makes me love JQuery, and want more.
Will Paccione
December 19th, 2008
Great tutorial. Love jQuery!
srganesan
January 3rd, 2009
Hi jef
i learn lot of thing from your tutorial.
this is best tutorial for learn jQuery thanks
sven
January 8th, 2009
thanks for the tutorial.
i got this:
function initMenu() {
$(’#menu ul’).hide();
$(’#menu li a’).click(
function() {
$(this).next().slideDown(’slow’);
}
);
}
$(document).ready(function() {initMenu();});
which gives me the accordeon effect in a menu.
problem i have is, if i click an anchor within the ul the links within get hidden again.
any ideas?
cheers
Erik Jenkins
February 21st, 2009
These tutorials are great. I was struggling to learn JavaScript when someone pointed me to these tutorials, and now I have no problem doing cool stuff with JQuery. Thanks again!
Eric
March 15th, 2009
Great tutorials! Thank you so much!
Afsar
March 24th, 2009
Really nice! Thanx
Mickey Hoang
April 12th, 2009
great!
Henry
April 25th, 2009
Great tutorial. Thank you so much.
QUestion:
I use
$(’li’).click(function (){
$(this).toggleClass(’highlight’);
});
for li. seems it only highlight the original itmes, not the new added ones (as in the last tutorial).
Any idea?
Sirpingalot
April 29th, 2009
Hi Jeffrey,
Loved the tutorial series.. Still need to check out the rest of the site, but am so far enjoying it. Kudos for doing these. I’ve subscribed, wouldn’t want to miss them.
Thanks again.
Tommy
April 30th, 2009
Thanks for the clear explanations. Is there anyway to add a speed to the toggleClass(). You were able to do it with toggle(). Can the same be done with toggleClass()? Thanks in advance!
julie
May 1st, 2009
Wow!!! You are a God send! Thank you so much! I often find programming things daunting but your tutorials have demystified them. Thank you!!!!
Mike
May 3rd, 2009
Jeff, I am with Tommy. Cannot get speed to work with toggleClass, even though it is in the jquery.com API documentation.
I applaud your work here too!
Keshav
May 4th, 2009
Hey Jeff,
U are Just Mind Blowing Teacher……
U explained each thing so smooth…………………….
Keshav
May 4th, 2009
Hey Jeff,
U are Just Mind Blowing Teacher……
U explained each thing so smooth…………………….
I have no words to praise You sir……………………….
please expand more videos….
& one Request….
can u provide any facility to download these Videos for personal use…..
& can u provide AJAX tutorails also……..
I will b very very very…..Thankful to u for my life time
Abhijit
May 6th, 2009
Hi Jeff,
Simply great tutorials. Simplicity of the teaching process makes it more valuable.
Thanks for the way to did.
Can you do a favor. Please provide the videos so that I can use them offline whenever I need as reference.
Regards
Codie
May 9th, 2009
Absolutely loving these series
charlie
May 15th, 2009
Word up!
This has been cooler then Zak Morris’s cell phone! I look forward to learning more Jquery.
unkown guest
May 16th, 2009
awsome tutorials, i cant stand your voice
Counter
May 18th, 2009
JQuery was a dreaded word for me, this tutorials made a whole lot of difference.
JqueryBeginner
May 28th, 2009
Great tutorial for a beginner like me, but there is one thing I don’t get.
When I have many different layers I “toggle visible” in a menu I have to click on the same link to close it.
Is’nt it some way to do that if I click on one link to show that layer, the other layers hides at the same time?
Oz
June 4th, 2009
Good tutorials for someone not experienced with javascript of jquery. Ive subscribed to your RSS feed and look forward to more quality content.