Show one DIV, hide the rest

@ehimeSep 02.2009

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?

[code=php] 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>’; [/code]

to post a comment

JavaScript

@JMRKERSep 02.2009 — #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 ?

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt; Show/Hide Arguments &lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 // From: http://www.webdeveloper.com/forum/showthread.php?t=216026
 
 function set_visibility (foo) {	// flag, element0,....elementN
 for (var i = 1; i&lt;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);
 }
 
 &lt;/script&gt;
 &lt;style type="text/css"&gt;
 rBtn { display:block; }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body onload="set_visibility('none','div0','div1','div2','div3','div4')";
 
 &lt;input type="radio" name="divAreas" value="0" onclick="RBtnClick(this.value)"&gt;0
 &lt;input type="radio" name="divAreas" value="1" onclick="RBtnClick(this.value)"&gt;1
 &lt;input type="radio" name="divAreas" value="2" onclick="RBtnClick(this.value)"&gt;2
 &lt;input type="radio" name="divAreas" value="3" onclick="RBtnClick(this.value)"&gt;3
 &lt;input type="radio" name="divAreas" value="4" onclick="RBtnClick(this.value)"&gt;4
 
 &lt;div id="div0"&gt; DIV area zero &lt;/div&gt;
 &lt;div id="div1" class="rBtn"&gt; DIV area one &lt;/div&gt;
 &lt;div id="div2" class="rBtn"&gt; DIV area two &lt;/div&gt;
 &lt;div id="div3" class="rBtn"&gt; DIV area three &lt;/div&gt;
 &lt;div id="div4" class="rBtn"&gt; DIV area four &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Good Luck!

?

@ehimeauthorSep 02.2009 — #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.

<i>
 </i>function tap(single) {
 var xs = document.getElementsByTagName("div");
 for(var x=0; x&lt;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';
 }
 }
 }
 }

@JMRKERSep 02.2009 — #Well, like I said before ...
I'm a little confused as to what you are trying to do, ?,
[/QUOTE]

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!

?

Show one DIV, hide the rest

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Show one DIV, hide the rest

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴