Expand a page to show hidden text

[Andy]

I have a <div> section in my page that I want to make visible via an input check box with OnClick javascript.
I can do this but the page reserves the space for the hidden class div and the user clicks the button to make it visble or nor visible.
What I really want is for the page to expand to reveal the div if the user clicks the box is checked and contracts again if the box is unchecked again. Much neater.
Here are the important bits of the code so far :-

<style type="text/css">.hidden { position: relative; visibility: hidden; }</style>

.............

<SCRIPT LANGUAGE="JavaScript">

function set(What,Value)
{

if (document.layers && document.layers[What] != null)
document.layers[What].visibility = Value;
else
if (document.all)
eval('document.all.'+What+'.style.visibility ="'+ Value+'"');
}

function click1(Form,Radio,Layer)
{
vv = "visible"
hh = "hidden"
if (Form.C1.checked)
{set(Layer,vv);}
else
{ set(Layer,hh);}
}
</SCRIPT>

...........

<td align="left" valign="top" width="100%"><input type="checkbox" name="C1" onClick="click1(this.form,this.name,'L1')" value="OFF"><div class="hidden" id="L1"><ul><li>xxx</li><li>yyy</li></ul></div></td>


Can you help?
Thanks.

 

[Vijay G]

Hi,

Modified your code : Instead of visibility="hidden", you must use
display="none" and display=""

<SCRIPT LANGUAGE="JavaScript">
function set(What,Value)
{
if (document.layers && document.layers[What] != null)
document.layers[What].visibility = Value;
else
if (document.all)
eval('document.all.'+What+'.style.display ="'+ Value+'"');
}

function click1(Form,Radio,Layer)
{
vv = ""
hh = "none"
if (Form.C1.checked)
{set(Layer,vv);}
else
{ set(Layer,hh);}
}
</SCRIPT>


<td align="left" valign="top" width="100%">
<input type="checkbox" name="C1" onClick="click1(this.form,this.name,'L1')"
value="OFF">
<div style="display:none" id="L1"><ul><li>xxx</li><li>yyy</li></ul></div>

Let me know if this helps.

Regards,
Vijay

Disclaimer: This posting is provided "as is" with no warranties and confers
no rights

--------------------
| Thread-Topic: Expand a page to show hidden text
| thread-index: AcO7NAn52wwZv9unRnmThXX6JqS+jw==
| X-Tomcat-NG: microsoft.public.frontpage.programming
| From: "=?Utf-8?B?QW5keQ==?=" <[email protected]>
| Subject: Expand a page to show hidden text
| Date: Fri, 5 Dec 2003 05:31:07 -0800
| Lines: 39
| Message-ID: <[email protected]>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.0
| Newsgroups: microsoft.public.frontpage.programming
| NNTP-Posting-Host: tk2msftcmty1.phx.gbl 10.40.1.180
| Path: cpmsftngxa07.phx.gbl!cpmsftngxa10.phx.gbl
| Xref: cpmsftngxa07.phx.gbl microsoft.public.frontpage.programming:24418
| X-Tomcat-NG: microsoft.public.frontpage.programming
|
| I have a <div> section in my page that I want to make visible via an
input check box with OnClick javascript.
I can do this but the page reserves the space for the hidden class div and
the user clicks the button to make it visble or nor visible.
What I really want is for the page to expand to reveal the div if the user
clicks the box is checked and contracts again if the box is unchecked
again. Much neater.
Here are the important bits of the code so far :-

<style type="text/css">.hidden { position: relative; visibility: hidden;
}</style>

............

<SCRIPT LANGUAGE="JavaScript">

function set(What,Value)
{

if (document.layers && document.layers[What] != null)
document.layers[What].visibility = Value;
else
if (document.all)
eval('document.all.'+What+'.style.visibility ="'+ Value+'"');
}

function click1(Form,Radio,Layer)
{
vv = "visible"
hh = "hidden"
if (Form.C1.checked)
{set(Layer,vv);}
else
{ set(Layer,hh);}
}
</SCRIPT>

..........

<td align="left" valign="top" width="100%"><input type="checkbox" name="C1"
onClick="click1(this.form,this.name,'L1')" value="OFF"><div class="hidden"
id="L1"><ul><li>xxx</li><li>yyy</li></ul></div></td>


Can you help?
Thanks.
|