show/hide javascript

[dylanb]

Hi can anyone tell me how to alter this script so it will works on
classes and id's;
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>

its called by;

<a href="javascript:void(0)" onmouseover="showhide('divname')">
link</a>

<div style="display: none;" id="divname">
some content
</div>

I just need to make it work on div classes

 

[Thomas 'PointedEars' Lahn]

Hi can anyone tell me how to alter this script so it will works on
classes and id's;
<script>

function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}

A bit more indentation would make this script legible, but not good.
For example, `obj' was not declared and so is not local; it should be

var obj = ...

instead.

</script>

its called by;

<a href="javascript:void(0)" onmouseover="showhide('divname')">
link</a>

Should be at least

<script type="text/javascript">
document.write('<a href="javascript:void(0)" onclick="return false"'
+ ' onmouseover="showhide(\'divname\')">link<\/a>');
</script>

so that no-script users are not bothered with a non-working element.

<div style="display: none;" id="divname">
some content
</div>

It is a really bad idea to hide content first. This way it will stay
inaccessible when there is insufficient script and DOM support available.

I just need to make it work on div classes

Since unlike an ID a CSS class may be used for several elements in a
document, the solution is a not a trivial one. See e.g.
dhtml.getElemByClassName() in http://PointedEars.de/scripts/dhtml.js

Another way is to apply the XPath expression `//*[@class="foo"]' on the BODY
node or a decendant node, see <http://developer.mozilla.org/en/docs/XPath>.
(This will be implemented in the next version of dhtml.js.)


PointedEars