Hiding/showing dynamically etc

[Leozack]

I was so tired last night I posted this to the css forum by mistake, thuogh it is a mix of css and js really :

Hi all, probably gonna sound dumb but I can't find the right answer to this. I have a page of search results andI'd like to hide some extra info for each one until they click a link or something to display it inline if they want to see the extra info. Might also have a close link to hide it again.

Anyway I've just gone round the houses with code that should work fine (was all fine 2 years ago in both IE6 and FF) but now FF2 debug (loveable tool) is complaining about IE only things like word-wrap and cursor:hand (which I can ignore despite filling my error screen with it, grrr) but more importantly I can't solve this hiding/showing business.

I have a couple of old js functions which should work fine

function ElemHide(elementname) {
    document.getElementById(elementname).style.display="none";
}
function ElemShow(elementname) {
    document.getElementById(elementname).style.display="inline";
}

Then for each search result I have tried various ways hiding/showing the info - I can put it into a div/span with an id of hiding35 or showing35 (where 35 is just the result number) for example or I can set them to a class but if I try hose js functions it firstly says "Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead." which is funy since tha's what I'm using, followed by "Error: document.getElementById(elementname) has no properties" which is less funny since it's stopping anything frmo working!

Also I've considered this only works if I'm hiding/showing 1 specific thing.

What if I have a few spans or tables per result I want to hide/show at a time? eg a table shows some items but if you click the link some other items appear (and possibly some alrady showing disappear) and then viceversa? This element-method must surely not be the ebst way to do that. But class-switching seems just as hard if I'm going to have lots of sets of this to handle?

I've done my head in and giving up for tonight, all ideas appreciated x_x

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[tsuji]

alert the elementname in each function. The no properties message would suggest an inexiting elementname (or empty) as a prime cause.

 

[Leozack]

I've checked the raw html source and it clearly had tables saying id="showing35" etc and the code was calling with 'showing35' since it came up as that in the error saying there was no such thing. Very odd :/

But since I thought I'd want it to hide/show more than 1 element, I figured that method wouldn't work since if I have multiple elements with the same id, it will break I think rather than show/hide them all simultaneously

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[tsuji]

Sure, avoid non-uniqueness of id as a matter of course.

 

[Leozack]

So if you had a bunch of elements - be it cells in a table or spans or images - and you wanted to label them all as something like hide35 and show35 and have a way to hide the showing ones and show the hidden ones for instance - what would be the best way to do that?

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[tsuji]

You can group elements by name. On client-side, use getElementsByName() method to get to them. On the server-side, the request object will reflect the design as well.

 

[Leozack]

so I could say something like
onClick="HideStuff('setA');ShowStuff('setB')"

function HideStuff(name) {
document.getElementsByName(name).style.display="none";
}

function ShowStuff(name) {
document.getElementsByName(name).style.display="inline";
}

? Or am I barking up the wrong tree You lost me a little with the last bit though "On the server-side, the request object will reflect the design as well"? o.o

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[tsuji]

Set display one-by-one, not as a group.
[tt]
var celem=document.getElementsByName(name);
for (var i=0;i<celem.length;i++) {
celem.style.display="none"; //or "inline" accordingly
}
[/tt]

 

[Leozack]

Thanks I'll give this a whirl

_________________________________
Leozack

MakeUniverse($infinity,1,42);