You should set style="display:none;" in the actual html rather than
the css for it to be compatible with prototype.

Your code at the bottom is very confusing at the moment as well. It's
saying, toggle-fade the box and grow it (at the same time). I'd just
go for Element#hide(), Effect.Grow(....).

I've also rewritten the first part of your code, you can see what each
bit is doing I'm sure, any q's let me know. Oh and it sounds like you
don't have Firebug. Firebug, a firefox extension, is a lifesaver when
it comes to JS. I really mean that - an absolute lifesaver. You can
use console.log('string') in your scripts and it will print stuff to
the console. Firebug will also give you details of any interpretation
errors in your code. Chances are, you run this with Firebug, it tells
you exactly what's going wrong.

Anyway, so the ugly first block can actually be condensed down to

// hide all childLevel box sets in case of previous clicks
$('childLevel').select('div').each(function(node) { if(!
node.hasClassName(newBox)) node.hide(); });

Can I also suggest that you use id's to reference each individual box
rather than separate class names - semantically it's better if a class
name only ever refers to one node for that to instead be the node's
id. Then all nodes can have classname "box" or something, which again
makes things easier:

$$('.box').each(function(node) { if(! == newBox)
node.hide(); });

On Sep 18, 2:13 pm, Matt <[EMAIL PROTECTED]> wrote:
> Hopefully this is an easy one...
> I'm building a multi-level navigation system. You click on one box and
> a set of sub-boxes displays underneath. Since there are multiple
> possible sets of sub-boxes, I've tried to write a function to hide
> them and only display the relevant one. Here's some code:
>         // hide all childLevel box sets in case of previous clicks
>         myNodes = $(childLevel).select('div'); // grab all box sets inside
> childLevel
>         for(x=0;x<myNodes.length;x++) { // loop through each div
>                 if(!$(myNodes[x]).hasClassName(newBox)) {
>                         // hides everything except newBox
>                         Element.hide(myNodes[x]);
>                 }
>         }
>         // show the relevant box
>         new Effect.toggle(newBox, 'appear');
>         new Effect.Grow(newBox, 120);
> In my page, I call the above code in order to show a div with the
> newBox class and hide all the others, in case the user has already
> selected one box (and thus displayed its children). When I click a box
> for the first time, its children are displayed, but when I click a
> different box, the first box's children disappear but nothing else
> shows up. All the possible children are set to display:none and I know
> Prototype has issues with this - can anyone advise me on how to get
> this to work?
> Thanks
> Matt
You received this message because you are subscribed to the Google Groups 
"Prototype &" group.
To post to this group, send email to
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at

Reply via email to