Thanks Trevor
I thought this would be a simple problem but i can't seem to get to
grips with it. I'll try today but if i have no luck your code would be
a great help. many thanks
S.
Hi S,
I have looked at the further replies this morning and what Jon suggested
seems just like what I was going to send. i.e just show/hide the <div >
itself.
In case you need it, here is Jon's code again complete with the tags -<head>
<body> etc. - so that you can see what goes where. (I have made one small
change to show that the 2 states for style:display are 'none' and 'block'.)
<html>
<head>
<script type="text/javascript">
function showHide(){
if (!document.getElementById) return;
var a = document.getElementById('hiddenDiv'),
b = document.getElementById('hideLink');
a.style.display = (a.style.display=='none')?'block':'none';
b.innerHTML = (a.style.display=='none')?'show div':'hide div';}
</script>
</head>
<body>
<a id="hideLink" href="javascript:;" onclick="showHide();return false;">
show div</a>
<div id="hiddenDiv" style="display:none">
hidden text
</div>
</body>
</html>
BTW,
1. Ron's reference (which is a lot more code) suggests that the <div> can
also be a floating <div>. But this may be a bit of overkill since Jon's code
works fine.
2. If it helps understand what the function is doing, it can be written as
function showHide(){
if(!document.getElementById) return;
var a=document.getElementById('hiddenDiv'),
b=document.getElementById('hideLink');
if (a.style.display=='none')
{ a.style.display='block'; b.innerHTML='hide div'}
else
{ a.style.display='none'; b.innerHTML= 'show div'}
}
i.e.
if the display of 'hidden Div' is 'none',
then it is set to 'block' and the text is changed to 'hide div'
else it is set to 'none' and the text is changed to 'show div'
