.toggle() only hiding it's target element, not toggling states on alternate clicks

Question

I'm trying to create a button which toggles the visibility of the two elements on every other click...this working fine up to a few days ago but now on page load it hides the button. I found that .toggle also works to show/hide elements but how do you use it to toggle between functions on alternate clicks?

JS:

$("#button").toggle(
     function(){
          $('#stuff1').hide("slow");
          $('#stuff2').show("slow");
     },
     function(){ 
          $('#stuff1').show("slow");
          $('#stuff2').hide("slow"); 
     }
);

HTML:

<img id="button" src="button.jpg"/>
<p id="stuff1">stuff</p> 
<p id="stuff2">stuff</p>

score 2 · Accepted Answer · answered Jan 23 '13 at 02:55

2

The reason it stopped working for you is because this toggle overload was deprecated in 1.8 but you didn't notice, and was removed in 1.9 and only now you noticed:

.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )

version deprecated: 1.8, removed: 1.9

Use use toggle function:

$("#button").click(function(){
      $('#stuff1').toggle("slow");
      $('#stuff2').toggle("slow");
});

answered Jan 23 '13 at 02:55

gdoron

147,333
58
291
367

@FabrícioMatté, I thought about it, but jQuery has a special regex for matching single id selector which is extremely fast, if you add something to it, it can't be used. [docs](http://api.jquery.com/id-selector/) – gdoron Jan 23 '13 at 03:09
I almost forgot about that detail. Caching the jQuery object obtained from the selector `$('#stuff1, #stuff2')` into a variable would work though. But that's out of the scope of the question, never mind that. `=]` – Fabrício Matté Jan 23 '13 at 03:10
Though, now I wonder if creating 2 jQuery objects with 2 `document.getElementById` pays off a single object utilizing QSA.. Will do benchmarks some other time. The microseconds. – Fabrício Matté Jan 23 '13 at 03:12
@FabrícioMatté, this is a micro-optimization, I see no point checking it out except if it's motivated y curiosity. – gdoron Jan 23 '13 at 03:17
Just curiosity actually. I'd personally go with the shorter code to save some bytes from the JS file. And I know that the pure ID selector is much faster when compared to QSA so e.g. `$('#foo')` is recommended over `$('div#foo')`, but just to compare 2 objects generated through ID selectors vs 1 QSA: http://jsperf.com/2-id-selectors-vs-1-qsa - you are right, the pure ID selectors outweigh the overhead of extra function calls. – Fabrício Matté Jan 23 '13 at 03:23
Ah- that makes sense. Is there a way to effect multiple objects then? The way .toggle used to work? Say if I wanted to change the background image of the button via .css and use .hide/.show on #stuff1/#stuff2? I'm new here so let me know if I should just ask a different question – user1922019 Jan 23 '13 at 03:26
@user1922019, I didn't understand the question. – gdoron Jan 23 '13 at 03:36
I actually found a method here: http://stackoverflow.com/questions/2459153/alternative-to-jquerys-toggle-method-that-supports-eventdata Thanks! – user1922019 Jan 23 '13 at 03:38

score 0 · Answer 2 · answered Jan 23 '13 at 03:02

0

Try this

Jquery

$("#button").click(
     function(){         
          $('#stuff1').toggle("slow");
          $('#stuff2').toggle("slow");
     }

);

CSS

#stuff1
{
    display:none;
}

answered Jan 23 '13 at 03:02

Nandu

3,076
8
34
51

.toggle() only hiding it's target element, not toggling states on alternate clicks

2 Answers2