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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help - script to show & hide multiple divs

    Hi, I am new to javascript so any help would be much appreciated.

    I found the following script online to show/hide a login div.

    <script language="JavaScript" type="text/javascript">
    function login(showhide){
    if(showhide == "show"){
    document.getElementById('popupbox').style.visibility="visible";
    }else if(showhide == "hide"){
    document.getElementById('popupbox').style.visibility="hidden";
    }
    }
    </script>

    It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide.

    I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy.

    Thanks, James

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    Hm I don't get this. Obviously you know how to pass a parameter to a function, because you are already doing this with the parameter showhide. Or did you copy the script somewhere and you don't understand how it works?

    Nevertheless ... to add another parameter to the function, you add a comma and the parameter name to the list. Then you can access the parameter inside the function exactly the same as "showhide".
    Code:
    function login(elementID, showhide) {
       ...
       document.getElementById(elementID).style.visibility = "visible";
       ...
    }

  • #3
    Regular Coder
    Join Date
    Sep 2010
    Location
    Far far away
    Posts
    122
    Thanks
    0
    Thanked 16 Times in 16 Posts
    Hi icue,

    Do you really need handle visibility by changing the 'visiblity' parameter, not the 'display' one? There is main difference between these parameters:

    display == 'none' hides totally a html-element on a page and leaves the place whereas visibility == 'hidden' hides a html-element but keeps a place borrowed by an element.

    The simplest way to hide/show elements on a page is switching of the display parameter between 'none' to hide and 'block' to show. But the best way is to use a class with the single CSS-rule, for example

    Code:
    .hidden {
        display: none;
    }
    When you need to hide an element -- just add the class 'hidden' to each element that should be hidden and remove this class to show elements again.

    Try the example from this post Showing and hiding layers with javascript and CSS (HELP)
    Last edited by siberia-man; 07-06-2011 at 01:30 PM.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, Thanks for the replying.

    Yes I did copy the script and because I am new to Javascript I may not fully understand it.
    The example in this link (http://www.codingforums.com/showpost...0&postcount=13) also works well but I understand it even less.

    I need to know how to pass a value into the function from my link. I have the follow:
    <p><a href="javascript:login('show');">login</a></p>
    so that getElementById does not always open 'popupbox' but any div I choose. I also need the div to appear over other div's without moving or displacing anything else on the page. I have tried various ways that I have found online but not found the answer.

    Thanks, James

  • #5
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    838
    Thanks
    172
    Thanked 90 Times in 90 Posts
    Hi icue

    have a look at this

    It uses display: block or none, but if you prefer visibility: visible or hidden just say so.

    I think you can work this out.


    Code:
    <!doctype html>
    <html>
    <head>
    <title>Show Hide</title>
    
    <script type="text/javascript">
          function showHide(id) {
            var div = document.getElementById(id);
            div.style.display = ( div.style.display == "none") ? "block" : "none";
          }
    </script>
    
    </head>
    <body>
        <a href="#undefined" onclick="showHide('n1')">Line one</a>
        <a href="#undefined" onclick="showHide('n2')">Line two</a>
        <a href="#undefined" onclick="showHide('n3')">Line three</a>
    
    
    		<div id="n1" style="display:none;"><p>div one</p></div>
    		<div id="n2" style="display:none;"><p>div two.</p></div>
    		<div id="n3" style="display:none;"><p>div three etc etc.</p></div>		
    
    </body>
    </html>
    These div's are all hidden to begin,
    but for example If you want to show any div first,
    just change <div id="n2" style="display:none;"> to <div id="n2" style="display:block;">


    LT
    Last edited by low tech; 07-07-2011 at 12:27 AM.

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks LT and all who responded.
    I think your script will do the trick.

    Thanks again.


  •  

    Posting Permissions

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