AJAX

Toggle div visibility

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jun 2008

Posts: 13

Reputation: AliHurworth is an unknown quantity at this point

Solved Threads: 0

AliHurworth AliHurworth is offline

Offline

Newbie Poster

Toggle div visibility

Oct 25th, 2009

Hi all,

I have a div I would like to show and hide.

I've used a script before which works, but now reusing it I can't make it fly. As I can't see where I am going wrong, can anyone else help?

This is the one that works:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!--script in head tag -->
<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.layers)	   //NN4+
    {
       document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.visibility = iState ? "visible" : "hidden";
    }
    else if(document.all)	// IE 4
    {
        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    }
}
// -->
</script>
 
<body>
<div id="positioned-element25">
<a href="#" onClick="toggleBox('login',1);">Login</a></div>
<div id="login">
  <form name="fp_login" action="prcs_login.php" method="post">
	<table>
<!-- abbreviated -->
            <tr>
                <td>
...
                                            <td>
                                           	  <input type="button" onClick="toggleBox('login',0);" value="Cancel">
                                            </td>
                                         </tr>
 
 
    </table>
</form>
</div>
<!--script in head tag -->
<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.layers)	   //NN4+
    {
       document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.visibility = iState ? "visible" : "hidden";
    }
    else if(document.all)	// IE 4
    {
        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    }
}
// -->
</script>

<body>
<div id="positioned-element25">
<a href="#" onClick="toggleBox('login',1);">Login</a></div>
<div id="login">
  <form name="fp_login" action="prcs_login.php" method="post">
	<table>
<!-- abbreviated -->
            <tr>
                <td>
...
                                            <td>
                                           	  <input type="button" onClick="toggleBox('login',0);" value="Cancel">
                                            </td>
                                         </tr>
                                         
                                               
    </table>
</form>
</div>

...and this is the new version:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.layers)	   //NN4+
    {
       document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.visibility = iState ? "visible" : "hidden";
    }
    else if(document.all)	// IE 4
    {
        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    }
}
// -->
</script>
<body>
<div id="positioned-element25">
<a href="#" onClick="toggleBox('login',1);">Login</a></div>
    <div id="login"> 
            <?php
            include ('mailer.php');
            ?>
        </div>
...
<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.layers)	   //NN4+
    {
       document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.visibility = iState ? "visible" : "hidden";
    }
    else if(document.all)	// IE 4
    {
        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    }
}
// -->
</script>
<body>
<div id="positioned-element25">
<a href="#" onClick="toggleBox('login',1);">Login</a></div>
    <div id="login"> 
            <?php
            include ('mailer.php');
            ?>
        </div>
...

I can't see the difference, but the top one works and not the bottom. Pointers please?

•

Join Date: Apr 2009

Posts: 885

Reputation: Airshow will become famous soon enough

Solved Threads: 127

Airshow

Offline

Practically a Posting Shark

Oct 25th, 2009

Ali,

The problem may be that toggleBox doesn't actually have a toggle action. It shows/hides a dom element depending on what is passed to it as iState.

In other words, the reponsibility for which state becomes set, is external to toggleBox . If iState is always 1 or always 0 then the visibility state of 'login' will never change.

I thknk you should ensure that 'login' is initially hidden. This is best achieved with css:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
#login { visibility : hidden; }
#login { visibility : hidden; }

Then at least the Login link will cause it to become visible even if nothing ever hides it again.

Airshow

Last edited by Airshow; Oct 25th, 2009 at 7:38 pm.

50% of the solution lies in accurately describing the problem!

•

Join Date: Jun 2008

Posts: 13

Reputation: AliHurworth is an unknown quantity at this point

Solved Threads: 0

AliHurworth AliHurworth is offline

Offline

Newbie Poster

Thank-you Airshow...

Oct 25th, 2009

In the end I did it like so:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.display = iState ? "block" : "none";
    }
 
}
// -->
</script>
<script type="text/javascript">
<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.getElementById)	  //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.display = iState ? "block" : "none";
    }
    
}
// -->
</script>

and

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<div id="positioned-element25">
<a href="#" onClick="toggleBox('login',1);">Login</a></div>
    <div id="login" style="display:none"> 
            <?php
            include ('mailer.php');
            ?>
        </div>
<div id="positioned-element25">
<a href="#" onClick="toggleBox('login',1);">Login</a></div>
    <div id="login" style="display:none"> 
            <?php
            include ('mailer.php');
            ?>
        </div>