Forum Moderators: open
Hide Table/Toggle Image
Need some help
<html>
<head>
<script>
function ChangePic(currentPicToShow,val)
{
hrIds=document.getElementsByName("hrid")
imgObj=document.getElementsByName("imgname")
str=imgObj[val].src
hrIds[val].onclick=function(){ChangePic(str,val)};
imgObj[val].src=currentPicToShow
}
</script>
<script>
function toggle() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = '';
}else{
document.getElementById("hidethis").style.display = 'none';
}
}function offaddress()
{
xGetElementsByClassName('collapsible', document, 'tr',
function(e) {
e.style.display = 'none';
}
);
}
function onaddress()
{
xGetElementsByClassName('collapsible', document, 'tr',
function(e) {
try { e.style.display = 'table-row'; } // DOM
catch (err) { e.style.display = 'block'; } // IE
}
);
}
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
function xGetElementsByClassName(c,p,t,f)
{
var found = new Array();
var re = new RegExp('\\b'+c+'\\b', 'i');
// var list = xGetElementsByTagName(t, p);
var list = p.getElementsByTagName(t);
for (var i = 0; i < list.length; ++i) {
if (list[i].className && list[i].className.search(re)!= -1) {
found[found.length] = list[i];
if (f) f(list[i]);
}
}
return found;
}
</script>
</head>
<body>
<table border="0">
<tr>
<td>Always visible</td>
<td><a name="hrid" href="#" onClick="toggle(); "onclick="ChangePic('http://img457.imageshack.us/img457/3887/expminusop8.gif',0)"><image name="imgname" src="http://img507.imageshack.us/img507/7130/exppluspj5.gif" border="0" /></a></td>
</tr>
<tr id="hidethis" style="display:none;">
<td>Hide this</td>
</tr>
</table>
</body>
</html>
That's what I currently have, but for some reason, I can't get it to toggle image AND hide/show table, it only hide/shows the table. Can anybody shed some light onto what I may be doing wrong?
[edited by: TheAlbinoEthiopian at 7:48 pm (utc) on Nov. 12, 2006]
Hi TheAlbinoEthiopian...
<a name="hrid" href="#" onClick="toggle(); "onclick="ChangePic('http://img457.imageshack.us/img457/3887/expminusop8.gif',0)">
It looks like you are trying to assign two separate onclick events, which is not possible. The onclick event can take any number of JavaScript statements, separated by ';' (semicolon), so you can try rewritting your link as:
<a name="hrid" href="#" onclick="toggle();ChangePic('http://img457.imageshack.us/img457/3887/expminusop8.gif',0);return false;"> The 'return false;' bit on the end prevents the link being followed if the JS is executed.
<image name="imgname" src="http://img507.imageshack.us/img507/7130/exppluspj5.gif" border="0" />
It should be an <img> tag, not an <image> tag.
Hope that helps.
Thanks, and I knew about the image/img tag, but apparently they both work. Anyhoo, that helped a lot, but for some reason, the button will only show the hidden table, I can't hide it by clicking it again. Any insight?
Found the problem, the code to toggle is:
toggle();But since the semi-colon now seperates the onclicks, it does not function in the code.
[edited by: TheAlbinoEthiopian at 12:19 pm (utc) on Nov. 15, 2006]
...I knew about the image/img tag, but apparently they both work.
Hhhmmm, yes, they do both 'work'. But for valid HTML you need to use <img> - I'm not sure how/where <image> comes from?!
for some reason, the button will only show the hidden table, I can't hide it by clicking it again. Any insight?Found the problem, the code to toggle is:
toggle();
But since the semi-colon now seperates the onclicks, it does not function in the code.
The semi-colon is correct, both the toggle() and the ChangePic() functions are executed... the 'button' only shows the hidden table because the toggle() function is only executed once... this is because the ChangePic() function overwrites the onclick event with one that does not call the toggle() function, only the ChangePic() function:
hrIds[val].onclick=function(){ChangePic(str,val)};This needs to be changed to:
hrIds[val].onclick=function(){toggle();ChangePic(str,val)}; Having given it a quick test, that should now work as intended.
Thank you so much!
Join The Conversation
- Register For Free! - Become a Pro Member!
- See forum categories - Enter the Forum
Moderators and Top Contributors
- Moderator List | Top Contributors:This Week, This Month, Aug, Jul, Archive, Top 100 All Time, Top Voted Members
Hot Threads This Week
