By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,718 Members | 1,220 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,718 IT Pros & Developers. It's quick & easy.

show/hide javascript

P: n/a
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
Jun 27 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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
Jun 27 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.