On second thought, I think I get it.
You're doing something screwy with this:
if ($("#regions div").is(":visible")) { /* ... */}
It's not clear to me without checking the docs even what it means to
call .is() on a group of items, but I don't think this is really what
you want.
Ideally, you would like to keep track of the opened item, and there is
a reasonably simple way to do that: throw it into a closure like this:
var chooseRegion = (function() {
var current = null;
return function(ej) {
var newElt = $("#" + ej);
if (current) {
current.hide(100, function(){newElt.show(600);});
} else {
newElt.show(600);
}
current = newElt;
};
})();
If you're not used to closures, the syntax may seem screwy. This
shell:
(function() {
// ...
})();
creates and immediately executes an anonymous function. That
establishes a new scope in which you can store the variable "current"
and return the actual function you want assigned to "chooseRegion".
That new function is straightforward, and at the end of it we set the
variable "current" to the newly-opened div.
I think that will do what you want without flicker and without having
to try to close all the elements.
Cheers,
-- Scott
