www.webdeveloper.com
Results 1 to 5 of 5

Thread: Javascript Hide and Show Onclick

  1. #1
    Join Date
    Jul 2013
    Posts
    29

    Javascript Hide and Show Onclick

    Hello all,
    I am new to this forum and also fairly new to javascript (and coding) therefor may anyone willing to help please take this into mind before posting.

    I have the following code (please note this is a copy of the real code as just a test code). What i am trying to get this code to do is hide and show the divs as the buttons are clicked on while having one button "mycalls" a defualt to hide all the divs.

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    var counter = 0;
    function varstart()
    {
    if(counter!=0)
    {
    document.getElementById("layer"+counter).style.visibilty="visible";
    }

    if(document.getElementById("layer1").style.visibilty="visible" && counter !== 1)
    {
    document.getElementById("layer1").style.visibilty="hidden";
    }


    if (document.getElementById("layer2").style.visibilty="visible" && counter !== 2)
    {
    document.getElementById("layer2").style.visibilty="hidden";
    }

    if (document.getElementById("layer3").style.visibilty="visible" && counter !== 3)
    {
    document.getElementById("layer3").style.visibilty="hidden";
    }



    if(document.getElementById("layer4").style.visibility="visible" && counter !== 4)
    {
    document.getElementById("layer4").style.visibility="hidden";
    }


    if(document.getElementById("layer5").style.visibility="visible" && counter !== 5)
    {
    document.getElementById("layer5").style.visibility="hidden";
    }

    if(document.getElementById("layer6").style.visibility="visible" && counter !== 6)
    {
    document.getElementById("layer6").style.visibility="hidden";
    }

    }
    </script>

    <style>

    .hide
    {
    visibility:hidden;
    position:absolute;
    top:300px;
    left:300px;
    height:300px;
    text-align:center;
    font-size:55px;
    }

    .bordered
    {
    text-align:center;
    color:darkred;
    font-size:15px;
    cursorointer;
    padding:5px;
    margin-bottom:3px;
    }

    #allcontainer
    {
    min-width:1266px;
    }

    .container2
    {
    text-align:center;
    float:left;
    width:171px;
    height:36px;
    border:thin ridge silver;
    }
    </style>
    </head>

    <body>

    <div id="allcontainer">
    <div class="container2">
    <a class="bordered" onclick="counter=0;varstart();">My Calls</a>
    </div>
    <div class="container2">
    <a class="bordered" onclick="counter=1;varstart();">All Open Tickets</a>
    </div>
    <div class="container2">
    <a class="bordered" onclick="counter=2;varstart();">Closed Tickets</a>
    </div>
    <div class="container2">
    <a class="bordered" onclick="counter=3;varstart();">Unassigned Tickets</a>
    </div>
    <div class="container2">
    <a class="bordered" onclick="counter=4;varstart();">My Changed Requests</a>
    </div>
    <div class="container2">
    <a class="bordered" onclick="counter=5;varstart();">Project Tasks</a>
    </div>
    <div class="container2">
    <a class="bordered" onclick="counter=6;varstart();">ERG 2</a>
    </div>

    <div id="layer1" class="hide">
    <p>test1</p>
    </div>

    <div id="layer2" class="hide">
    <p>test2</p>
    </div>

    <div id="layer3" class="hide">
    <p>test3</p>
    </div>

    <div id="layer4" class="hide">
    <p>test4</p>
    </div>

    <div id="layer5" class="hide">
    <p>test5</p>>
    </div>
    <div id="layer6" class="hide">
    <p>test6</p>
    </div>



    </body>
    </html>



    <---------->

    I cannot get this code to work in both firefox and IE.
    I did get it to work in Firefox for a short amount of time before finding that it failed again when i came back to the code after starting on a new project.

    Can someone please reply with a bug fix to this code and also (if possible) a better more robust way to accomplise the idea behind the code.

    All help will be greatly appreciated..

    Thanks,


    ps: although i can read jquery i cannot code or use it in the site i am working.

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    Somme errors...

    • The charset is not set.
    • The condition if(document.getElementById("layer1").style.visibilty="visible") is not a test but an affectation.
    • The div allcontainer is not closed.
    • It's easier to change the class that the visibility.
    • Finally, the function is unnecessarily complicated.

    I propose this code (only an extract)
    Code:
        <head>
        <meta charset="utf-8">
    <script type="text/javascript">
    var counter = 0;
    function varstart(n){ 
        if (counter) document.getElementById("layer"+counter).className="hide";
        counter=n;
        if (counter) document.getElementById("layer"+counter).className="show";
    }
    </script>
    <style>
    .hide{visibility:hidden;position:absolute;top:300px;left:300px;height:300px;text-align:center;font-size:55px;}
    .show{visibility:visible;position:absolute;top:300px;left:300px;height:300px;text-align:center;font-size:55px;}
    .bordered{text-align:center; color:darkred; font-size:15px; cursor:pointer; padding:5px; margin-bottom:3px; }
    #allcontainer{min-width:1266px;}
    .container2{text-align:center; float:left; width:171px; height:36px; border:thin ridge silver; }
    </style>
        </head>
        <body>
            <div id="allcontainer">
                <div class="container2">
                    <a class="bordered" onclick="varstart(0);">My Calls</a>
                </div>
                <div class="container2">
                    <a class="bordered" onclick="varstart(1);">All Open Tickets</a>
                </div>
                <div class="container2">
                    <a class="bordered" onclick="varstart(2);">Closed Tickets</a>
                </div>
                // ...
            </div>
    		<div id="layer1" class="hide">
    			<p>test1</p>
    		</div>
    		<div id="layer2" class="hide">
    			<p>test2</p>
    		</div>
    		//...
    Last edited by 007Julien; 07-02-2013 at 06:36 AM.

  3. #3
    Join Date
    Jul 2013
    Posts
    29
    Hello 007Julien,

    That looks great and a lot more simpler.
    One last thing however, could you or somoene else explain the:

    if (counter) document.getElementById("layer"+counter).className="hide";
    counter=n;

    part as i don't understand how this validates which div should be displayed and which divs should be hidden.

    Thanks again

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    The variable counter is a global variable which contains zero or the layer's number of the visible źdiv╗.
    Then we hide the źdiv╗ only if it exists (if(counter) is true if counter!=0). In other words, without if (counter) before document.getElementById("layer"+counter).className="hide"|"show";, we get an error : the corresponding element don't exists.

    Then the function hide the visible div if it exists, update the counter (with the argument n), and show the new źdiv╗ if it exists. Finally counter would be better called visibleLayer.
    Last edited by 007Julien; 07-02-2013 at 08:16 AM.

  5. #5
    Join Date
    Jul 2013
    Posts
    29
    Thanks for all your help 007Julien,

    Stunning help and example.

    Just finished the new version of my code using your technique and it works like a dream, not only that i learnt a few more things about js at the same time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles