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]

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

<script type="text/javascript">

> 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
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann