SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show hide <div> layers

    Hi I've got a piece of javascript which shows or hides a div layer, works nicely except I'd like the trigger to show hide more than one div layer.

    Code follows

    Code:
    <head>
    <script language="JavaScript">
    <!--
    function showHide(elementid){
    if (document.getElementById(elementid).style.display == 'none'){
    document.getElementById(elementid).style.display = '';
    } else {
    document.getElementById(elementid).style.display = 'none';
    }
    }
    //-->
    </script>
    </head>
    Code:
    .....
    
    <a href="javascript:showHide('div1')">Click to show/hide</a> 
    
    <div id="div1" style="display:none;">Div Content...</div>
    How would I modify the code so that clicking on the hyperlink also shows/hides another layer eg: <div id="div2" style="display:none;">Div 2 Content...</div>

    Thanks in advance for your help
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  2. #2
    SitePoint Addict Phidev's Avatar
    Join Date
    Oct 2008
    Location
    Texas
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You will need to rename your divs, then do a for loop executing the "hide" code for all of your divs

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Instead of using unique div names, it's better to apply a class name to the elements you want to be affected.

    Then you can use getElementsByClassName to show/hide them.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    You will need to rename your divs, then do a for loop executing the "hide" code for all of your divs
    That is the very last thing you should do. If the intent is to show one at a time then use closure to store the state. Then you can act only on that state rather then running a loop on every module.

  5. #5
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    That is the very last thing you should do. If the intent is to show one at a time then use closure to store the state. Then you can act only on that state rather then running a loop on every module.
    Yeah struck me as unworkale too as I have a lot of other DIVs on the page which I don't want to show hide.
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com

  6. #6
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Tenerife, Spain / UK
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Instead of using unique div names, it's better to apply a class name to the elements you want to be affected.

    Then you can use getElementsByClassName to show/hide them.
    Good idea. I'll try that thanks.
    David Parkes
    Nuclear Internet - Windows Web Hosting
    http://www.nuclearinternet.com


Bookmarks

Posting Permissions

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