www.webdeveloper.com
Results 1 to 4 of 4

Thread: Show one DIV, hide the rest

  1. #1
    Join Date
    Oct 2008
    Location
    Seattle, Wa
    Posts
    695

    Show one DIV, hide the rest

    Looked around but all I could find was the same as what I use,
    showing and hiding divs onclick. Anyone know how to modify this
    code to hide the rest of the DIVs?

    PHP Code:
    echo    "\n".'<script type="text/javascript">';
    echo    
    'function toggle_visibility(foo) {
               for(var i = 0, len = arguments.length; i < len; i++)
                var e = document.getElementById(arguments[i]).style,d = e.display;
                e.display = (d == "block") ? "none" : "block"; }'
    ;
    echo    
    "\n".'</script>'

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Lightbulb Consider this ...

    I'm a little confused as to what you are trying to do, ,
    so this is my best guess at to what you want.
    Demonstration of how to pass arguments to a function

    Code:
    <html>
    <head>
    <title> Show/Hide Arguments </title>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=216026
    
    function set_visibility (foo) {	// flag, element0,....elementN
      for (var i = 1; i<arguments.length; i++) {  // alert(arguments[i]);
        var e = document.getElementById(arguments[i]).style;
        var d = e.display;
        e.display = arguments[0];
      }
    }
    
    function RBtnClick(V) {
      set_visibility('none','div0','div1','div2','div3','div4');
      set_visibility('block','div'+V);
    }
    
    </script>
    <style type="text/css">
      rBtn { display:block; }
    </style>
    
    </head>
    <body onload="set_visibility('none','div0','div1','div2','div3','div4')";
    
    <input type="radio" name="divAreas" value="0" onclick="RBtnClick(this.value)">0
    <input type="radio" name="divAreas" value="1" onclick="RBtnClick(this.value)">1
    <input type="radio" name="divAreas" value="2" onclick="RBtnClick(this.value)">2
    <input type="radio" name="divAreas" value="3" onclick="RBtnClick(this.value)">3
    <input type="radio" name="divAreas" value="4" onclick="RBtnClick(this.value)">4
    
    <div id="div0"> DIV area zero </div>
    <div id="div1" class="rBtn"> DIV area one </div>
    <div id="div2" class="rBtn"> DIV area two </div>
    <div id="div3" class="rBtn"> DIV area three </div>
    <div id="div4" class="rBtn"> DIV area four </div>
    </body>
    </html>
    Good Luck!

  3. #3
    Join Date
    Oct 2008
    Location
    Seattle, Wa
    Posts
    695
    Wow, crazy coding you have there, I rewrote it, and am using this instead.
    I just wanted to show one div, and have the rest hidden.

    Code:
    function tap(single) {
        var xs = document.getElementsByTagName("div");
        for(var x=0; x<xs.length; x++) {
          name = xs[x].getAttribute("name");
              if (name == 'xs') {
                if (xs[x].id == single) {
                xs[x].style.display = 'block';
        } else {
            xs[x].style.display = 'none';
                  }
            }
         }
    }

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Talking

    Well, like I said before ...
    Quote Originally Posted by JMRKER View Post
    I'm a little confused as to what you are trying to do, ,
    I tried to use your original script as much as possible with the argument passing.

    The use of the getElementsByTagName is an acceptable alternative.
    I don't know the purpose of you code with just the short snippet.
    Why do you want to loop through the tags to hide them if you never display them?
    Why not just set them to hidden to begin with and don't bother with the loops?

    But if you are happy, so am I ...

    Good Luck!
    Last edited by JMRKER; 09-02-2009 at 03:13 PM.

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