Connecting Tech Pros Worldwide Forums | Help | Site Map

Help about div hide/show

ali
Guest
 
Posts: n/a
#1: Jan 12 '07
Hello every one

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("showHide").style.visibili ty="hidden";
}
but divs within above div don't get hide.

one way is to loop through all divs and made their visibility="hidden"
but it can't work for me as i have to hide a particular portion of web
page and no of divs within that protion is unknown. and making all divs
hidden by getElementByID(DivId) is impractial and overhead

any solution..


ASM
Guest
 
Posts: n/a
#2: Jan 12 '07

re: Help about div hide/show


ali a écrit :
Quote:
Hello every one
>
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("showHide").style.visibili ty="hidden";
}
but divs within above div don't get hide.
What do you mean by "above" divs ?
previous divs ?
or
divs displayed over the showHide div ?
or
divs contained by showHide ?
Quote:
one way is to loop through all divs and made their visibility="hidden"
but it can't work for me as i have to hide a particular portion of web
page and no of divs within that protion is unknown. and making all divs
hidden by getElementByID(DivId) is impractial and overhead
>
any solution..
Your page as described seems curiously built ...
(all elements in absolute, no ?)


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
ali
Guest
 
Posts: n/a
#3: Jan 14 '07

re: Help about div hide/show


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";
}
Quote:
>
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" value="want
to hide this text on click event">
</div>
</div>

</div>
Quote:
>
Your page as described seems curiously built ...
(all elements in absolute, no ?)
>
>
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
how can i access "id=hideable" text box to hide it

Evertjan.
Guest
 
Posts: n/a
#4: Jan 14 '07

re: Help about div hide/show


ali wrote on 14 jan 2007 in comp.lang.javascript:
Quote:
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";
}
>
Quote:
>>
>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"
Quote:
value="want
to hide this text on click event">
</div>
</div>
>
</div>
>
Quote:
>>
>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)
ASM
Guest
 
Posts: n/a
#5: Jan 14 '07

re: Help about div hide/show


ali a écrit :
Quote:
i need you help regarding div hide and show. i am having a link like
<a href="#" onClick="expandWin()">show/hide </a>
Quote:
here is i try to hide showHide by calling function
function hideWin()
{
document.getElementById("hideable").style.visibili ty="hidden";
}
>
<div id="showHide">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">
<div id="div3.1">
<input type="text" name="hideable"
value="want to hide this text on click event">
</div>
</div>
</div>
In fact you want to hide the div 'div3.1' no ?

If yes :
function hideWin() {
var d = document.getElementById("div3.1").style;
d.visibility = d.visibility==""? "hidden" : "";
}

Or to switch between show and hide :

function ShowHide(idDiv) {
var d = document.getElementById(idDiv).style;
d.visibility = d.visibility==""? "hidden" : "";
return false;
}

<a href="#" onclick="ShowHide('div3.1');">
show/hide div 'div3.1'
</a>


Now, if you want to hide an element of your form, it is better to call
this element by forms tree :

function hidder(form_name, element_name) {
document.forms[form_name].elements[element_name].style.visibility='hidden';
}

<a href="#" onclick="hidder('myForm','hideable');">
hide textfield "hideable"
</a>


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
ASM
Guest
 
Posts: n/a
#6: Jan 14 '07

re: Help about div hide/show


ASM a écrit :
Quote:
>
In fact you want to hide the div 'div3.1' no ?
>
If yes :
function Hide(idDiv) {
document.getElementById(idDiv).style.visibility = "hidden";
return false;
}

<a href="#" onclick="Hide('div3.1');">
hide div 'div3.1' and its textfield
</a>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Closed Thread