Using jQuery’s toggle() function

Please note: This post was written 7 years ago, which is an age in programming terms, so please don't treat this as gospel! I'll be updating all posts soon enough, but if you'd especially like this one to be updated let me know.

toggle

Note: This article has been marked for a quality review and will soon be updated.

jQuery is packed full of useful features that help you to "write less, do more" as their slogan says. One thing I have found over the years, when working with JavaScript, is the need to know what state an object is in. By that I mean wanting for instance to know whether an information box is open or closed, and then perform an action based upon the answer to that question. Now in the past I would use variables to give me this information, and then alter their values based upon the actions taken by the user. This method is somewhat cumbersome and I don't particularly like using it because it takes up quite a few lines of code. So where am I going with this? Well the other day I stumbled upon an incredibly useful function that is part of the jQuery library. And that function is the toggle() function.

The function allows you to set a number of actions that you would like to be cycled through and turns them in to a loop, essentially toggling the action taken. The first time the element is toggled, the first function specified is executed; the second time sees the second function executed, and so on. So, in my case, I was able to simply place some actions within the function and step back from all the complex JavaScript stuff. Let me show you what I mean.

$("#button").toggle(
  function(){
    $("#popup").fadeIn(250);
  },
  function(){
    $("#popup").fadeOut(250);
  }
);

The code above waits for the element named "button" to be clicked, and then fades-in an element named "popup" (I think you can see where this is going :)). You can also use the function as a way of hiding and showing elements in turn, using code similar to the block below.

$("#button").click(function() {
  $(".box").toggle();
})

The code above waits for the element named "button" to be clicked and then shows/hides all elements with a class of ".box" in turn. Remember that you need to set all the boxes you don't want showing to begin with, to have a display value of none.

And that's the toggle() function. It's really simple and easy to use, and it has saved me a lot of time. I thought I better share it with you because it isn't the best known function in the jQuery library, and it is one of the most useful! For more information on the function and some demos of it's usage, visit the API.

***

If you found this particularly useful and want to share the ♥ you can donate here.

***

2 Responses

  1. Ricardo Rowe-Parker

    Nice. I'll have to give this a shot. I've been wondering why tutorials and pages like this one don't use demos along with the code samples they provide? Doesn't it make a lot of sense to do so? Isn't it better to show some code and then do a demo that says "see, this is how it works!" instead of just show the code?

    Reply
    • Tom

      Hey Ricardo, yes that is an error on my part, but to be honest I don't really see what you would gain from a demonstration, the toggle() function is really much the same as the click() function. I wrote the article really as a quick tip so left out a demo, but you can see an in-depth explanation with a demo over at http://api.jquery.com/toggle/

      Reply


~ Comments are now closed ~

Get in touch here