Hiding Multiple Tag With Same Name Or Class

I have using prototype 1.5. Can you please tell me, how can i hide/show the div tag with same name or class. Element.hide('indicate') But, the above line only satisfy to hide the

Solution 1:

As pointed out, the $$ function is required. It returns an array so you need to invoke hide on all items.

$$('.indicate').invoke('hide');

Or, for bonus showing off points, you can use the function directly as an object:

var hideFunc = Element.hide;
$$('.indicate').each(hideFunc);

The advantage of this technique means you can easily swap the function for another, such as a Scriptaculous effect.

hideFunc = Effect.SwitchOff;

Solution 2:

Having the same id for two elements isn't supported in HTML, so there's no methods in Javascript to handle it. No matter what framework you're using.

Solution 3:

Prototype provides the $$() function which you can use to query any CSS selector.

So if you have multiple items with a single class, you can query them like this:

$$('.indicate');

See the Prototype manual: http://www.prototypejs.org/api/utility/dollar-dollar

By the way, since you're using Prototype 1.5, I could also mention that it gives you a .getElementsByClassName() function as well. However, this has now been deprecated in more recent versions since its functionality is already covered by $$(), and to avoid confusion, since modern browsers implement a native function with the same name, but different syntax.

So don't use it, but for the sake of completeness, here is the manual link: http://www.prototypejs.org/api/element/getElementsByClassName

Solution 4:

ID's have to be unique. Select with a class instead.

$$('div.indicate').hide();

or with its name attribute

$$('div[name=indicate]').hide();