Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Quicker way to show/hide divs 2

Status
Not open for further replies.
TheConeHead

TheConeHead

Programmer
Joined
Aug 14, 2002
Messages
2,106
Location
US
When I need to show a dive and hide the rest I usually do something like:

<head>
<script>
function show(which) {
switch(which) {
case "1" :
......visibility = "visible";
......visibility = "hidden";
break;
case "2" :
......visibility = "hidden";
......visibility = "visible";
break;
}
}
</head>
<body>
<div id="1">
</div>
<div id="2">
</div>
<a href="#" onclick="show('1')">1</a>
<a href="#" onclick="show('2')">2</a>

How could I do this more quickly and cleanly?

[conehead]
 
Sort by date Sort by votes
function show(which) {
blah = document.getElementById(which);
blah.style.visibility = whatever;
}

-kaht

banghead.gif
 
Upvote 0 Downvote
thanks... what I need to do though turn all the rest to hidden... how do I do that?

[conehead]
 
Upvote 0 Downvote
If the divs that are to be hidden/shown are the only divs on your page then try this:
Code: 
<script language=JavaScript>
function show(which) {
   allDiv = document.getElementsByTagName("div");
   for (i = 0; i < allDiv.length; i++) {
      allDiv[i].style.visibility = "hidden";
   }
   visibleDiv = document.getElementById(which);
   visibleDiv.style.visibility = "visible";
}
</script>
<body>
<form name=blahForm>
<input type=radio name=blahRadio onclick='show(1)' checked><div id=1>Blah1</div><br>
<input type=radio name=blahRadio onclick='show(2)'><div id=2 style='visibility : "hidden"'>Blah2</div><br>
<input type=radio name=blahRadio onclick='show(3)'><div id=3 style='visibility : "hidden"'>Blah3</div><br>
<input type=radio name=blahRadio onclick='show(4)'><div id=4 style='visibility : "hidden"'>Blah4</div><br>
<input type=radio name=blahRadio onclick='show(5)'><div id=5 style='visibility : "hidden"'>Blah5</div><br>
</form>
</body>

And if they aren't the only divs on the page, then you'll have to know the number of total divs to be hidden, but you can do something like this:
Code: 
<script language=JavaScript>
function show(which) {
   for (i = 1; i <= 5; i++) {
      document.getElementById(i).style.visibility = (i == which) ? "visible" : "hidden";
   }
}
</script>
<body>
<form name=blahForm>
<input type=radio name=blahRadio onclick='show(1)' checked><div id=1>Blah1</div><br>
<input type=radio name=blahRadio onclick='show(2)'><div id=2 style='visibility : "hidden"'>Blah2</div><br>
<input type=radio name=blahRadio onclick='show(3)'><div id=3 style='visibility : "hidden"'>Blah3</div><br>
<input type=radio name=blahRadio onclick='show(4)'><div id=4 style='visibility : "hidden"'>Blah4</div><br>
<input type=radio name=blahRadio onclick='show(5)'><div id=5 style='visibility : "hidden"'>Blah5</div><br>
</form>
</body>

-kaht

banghead.gif
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Rayj0000
  • Locked
  • Question Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
864
Rayj0000
Rayj0000
chrisjchrisj
  • Locked
  • Question Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
336
chrisjchrisj
chrisjchrisj

Part and Inventory Search

Sponsor

Back
Top