Toggle all elements with a given css class

Question

I'm trying to toggle multiple elements with a given css-class all at the same time with a single checkbox. This looks like this:

HTML:

<input type="checkbox" onclick="toggle_class('.subdivision_wraps');" />

JS:

function toggle_class(cssClass) {
  $$(cssClass).each(function(s){
    new Effect.toggle(s, 'blind', { duration: 0.3 });
  });
}

Should work, right? Wrong.. Only the first div gets toggled. Strangely enough if I use BlindDown everything works just the way I want it to (all the divs get blinded down simultaneously).

Am I doing something wrong? I know I could use BlindDown and BlindUp, but I'd rather solve this toggle-problem. Thanks in advance!

Answer 1

This appears to be some strange problem with Effect.toggle. If you give the div elements id values, your code works: http://jsbin.com/ifeqek/1 If you don't, you get the effect you're seeing: http://jsbin.com/ifeqek/3

So I'd probably update toggle_class to:

function toggle_class(cssClass) {
  $$(cssClass).each(function(s){
    s.identify(); // <======== The new bit, assign an id if there isn't already one
    new Effect.toggle(s, 'blind', { duration: 0.3 });
  });
}

Live Example | Source