function setNewBaseSrc(ele, newBaseSrc) {
var dirPath = ele.src.replace(/[^\/]*$/, ”);
ele.setAttribute(’src’, dirPath + newBaseSrc);
}

Then I replaced places that call setAttribute to set the src to call this routine instead. e.g.

replace:
twisty.setAttribute(’src’, ‘twisty-hidden.gif’);
with:
setNewBaseSrc(twisty, ‘twisty-hidden.gif’);

One nit: The variable “twisties” does not have a “var” in front of it in the toggle function.

Regarding nit #1, sometimes one would want to hide small subsections not because they take up space as such but because they constitute visual noise.

I think the way to make the effect look really nice and polished is to use two or three different animations. Either the server can generate the HTML with the right one in each case or one can use an onload handler to loop over the sections and replace the standard animation with faster ones for the small sections.

That is, if one /really/ cares about polish

(Don’t you love fountain pens that make just the right click sound when you put the cap back on?)

Nit #1: I agree about the sliding speed. I’m not sure what the solution is, frankly. I want the twisty animation to be the same speed as the slide animation. That means the slide always has to be the same speed. I suppose a refinement would be to get rid of both animations for small sections. However, I’m not sure it’s worth it. Why would you need to hide a small section?

Nit #2: This turned out to be a bug in the script.aculo.us animation package that I didn’t bother to research because I liked the effect. I’ve updated both demos and the tar file to fix the problem. (If the content outer div has padding, the animation doesn’t take that into account.)

Thanks!

Nits:

1) sliding speed. All sections slide in/out using the same amount of time. Since some are short (“Huh”) and others long (the table and picture), the sliding speed varies between the sections — which is to a certain extent fine. It’s just that a short section like “Huh” ends up sliding /very/ slowly, so you probably need to adjust the time if the slide distance is below a cut-off.

2) the sliding movements are not monotonic here. That might be something you did on purpose, because it looks sort of okay on the big table/picture section. On the other hand it looks awful on the short “Huh” section because the size of backwards step seems to be the same measured in pixels. Did you use the wrong DOM object or the wrong margin/border attribute? (Note, there are *many* browser bugs in that area!)

I’m going to use this in a project I’m working on now.

Shen