ali wrote on 14 jan 2007 in comp.lang.javascript
:
i need you help regarding div hide and show. i am having a link like
<a href="#" onClick="expandWin()">show/hide </a>
<div id=showHide>
</div>
within div i have lots of form tags and div elements say n. The problem
here is i try to hide showHide by calling function
function hideWin()
{
document.getElementById("hideable").style.visibili ty="hidden";
}
>>
What do you mean by "above" divs ?
previous divs ?
or
divs displayed over the showHide div ?
or
divs contained by showHide ?
By divs i mean divs contined by show hide
<div id="showHide">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">
<div id="div3.1">
<input type="text" name="hideable"
add this:
id="hideable"
value="want
to hide this text on click event">
</div>
</div>
</div>
>>
Your page as described seems curiously built ...
(all elements in absolute, no ?)
how can i access "id=hideable" text box to hide it
and do:
document.getElementById("hideable").style.visibili ty="hidden";
or do:
document.getElementById("hideable").style.visibili ty="div3.1";
Remember, on a page the id's need to be named uniquely!
However, perhaps you want something like this:
================================================
<script type='text/javascript'>
function toggle(id,n) {
var el = document.getElementById(id).childNodes
for (i=0;i<el.length;i++)
if (el[i].firstChild.className == 'hideable' + n)
el[i].firstChild.style.visibility =
(el[i].firstChild.style.visibility=='')?'hidden':'';
}
</script>
<div id='showHide'>
<div>something else</div>
<div>
<input type='text' name='hideable' class='hideable1'
value='input 1 want to show/hide this on click event'>
</div>
<div>
<input type='text' name='hideable' class='hideable2'
value='input 2 want to show/hide this on click event'>
</div>
<div>
<input type='text' name='hideable' class='hideable3'
value='input 3 want to show/hide this on click event'>
</div>
</div>
<a href='#' onClick='toggle("showHide",1)'>show/hide 1</a><br>
<a href='#' onClick='toggle("showHide",2)'>show/hide 2</a><br>
<a href='#' onClick='toggle("showHide",3)'>show/hide 3</a><br>
================================================
only ie7 tested!
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)