Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2004
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Not showing or hiding as desired.

    Hi Everyone,

    I have written a very small page (and accompanying script) to test the visibility altering behaviour of IE. I am trying to hide or show a <div> element, alternatively based upon a button being pressed. The code does not work as I had hoped, hence why I am posting. If anybody can provide some pointers as to how I might be able to get this code going I will be very appreciative. Thanks heaps.

    Regards

    Davo

    <html>
    <head>
    <title> Experimenting with toggling element visibility </title>
    <style type="text/css">
    #box
    {
    background-color: #00ff00;
    left: 50px;
    height: 100px;
    position: absolute;
    top: 50px;
    width: 100px;
    }
    #place_button
    {
    left: 100px;
    position: absolute;
    top: 300px;
    }
    </style>
    <script type="text/javascript">

    var visibile = true;

    function toggleMenu()
    {
    if(visibile == false)
    {
    document.getElementById("box").visiblity = "show";
    visibile = true;
    }
    else
    if(visibile == true)
    {
    document.getElementById("box").visibility = "hidden";
    visibile = false;
    }
    }
    </script>
    </head>
    <body>
    <div id="box">
    <form>
    <input id="place_button" type="button" value="Click This" onclick="toggleMenu()">
    </form>
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Try this:
    Code:
    <html>
    <head>
    <title> Experimenting with toggling element visibility </title>
    <style type="text/css">
    #box
    {
    background-color: #00ff00;
    left: 50px;
    height: 100px;
    position: absolute;
    top: 50px;
    width: 100px;
    }
    #place_button
    {
    left: 100px;
    position: absolute;
    top: 300px;
    }
    </style>
    <script type="text/javascript">
    function toggleMenu(el) {
    	el.style.visibility = (el.style.visibility == "visible" || !el.style.visibility) ? "hidden" : "visible";
    }
    </script>
    </head>
    <body>
    <div id="box">
    <form>
    <input id="place_button" type="button" value="Click This" onClick="toggleMenu(document.getElementById('box'))">
    </form>
    </div>
    </body>
    </html>
    dumpfi

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your copy and pasted question was also answered within minutes after posting it here.....


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •