jQuery for Absolute Beginners: Day 6

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

>

Download the Source Code



39

Comments
  • 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.

  • 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!

  • Awesome video. Will be putting this into practice shortly. Keep them coming!

  • Jeffrey says:

    @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 says:

    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 says:

    Good Work Jef!

  • Cerium says:

    Very nice tutorials, congrats !

  • Suresh says:

    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 says:

    @Suresh – Thanks! I appreciate that. I’m glad to hear it’s helping. Feel free to make any tutorial request.

  • Andris says:

    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 says:

    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 says:

    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 says:

    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 says:

    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 says:

    I got it – slideToggle() did it.
    This was just too easy to find ;)

  • Snookerman says:

    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 says:

    Hi, I see you too have problems with spam on gmail :)

    great tutorials, thanx, this makes me love JQuery, and want more.

  • Great tutorial. Love jQuery!

  • srganesan says:

    Hi jef
    i learn lot of thing from your tutorial.
    this is best tutorial for learn jQuery thanks
    :)

  • sven says:

    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 says:

    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 says:

    Great tutorials! Thank you so much!

  • Afsar says:

    Really nice! Thanx

  • Mickey Hoang says:

    great!

  • Henry says:

    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 says:

    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 says:

    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 says:

    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 says:

    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 says:

    Hey Jeff,
    U are Just Mind Blowing Teacher……
    U explained each thing so smooth…………………….

  • Keshav says:

    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 says:

    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 says:

    Absolutely loving these series :)

  • charlie says:

    Word up!
    This has been cooler then Zak Morris’s cell phone! I look forward to learning more Jquery.

  • unkown guest says:

    awsome tutorials, i cant stand your voice

  • Counter says:

    JQuery was a dreaded word for me, this tutorials made a whole lot of difference.

  • JqueryBeginner says:

    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 says:

    Good tutorials for someone not experienced with javascript of jquery. Ive subscribed to your RSS feed and look forward to more quality content.

  • webgentry says:

    Can a “speed,” “animation,” or “transition” be set for toggleClass?