Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2421
  • Last Modified:

Show/hide DIVs (radio buttons)

Hi,

I want to show and hide DIV-elements by using multiple radio buttons
(and diffent radio names).

The problem is that when I "hit" a radio button the content of the
other radio button (DIV) get hidden.

Hope someone understand my problem  

Thanks Vetle
sorry my bad english...!



<html>
<head>
<title>Help me</title>

<style type="text/css">
.hide {display: none}
</style>

<script type="text/javascript">
function hideDiv(){
tag = document.getElementsByTagName("div");
for(x=0;x<tag.length; x++){
if(tag[x].getAttribute('id').indexOf("choose_") != -1){
tag[x].style.display = "none";
}
}
}
function view(id){
ge = document.getElementById('choose_' + id.value);
hideDiv();
ge.style.display = "block";
}
</script>

</head>
<body>
<table>
<form name="form1" id="form1" method="post" action="">
<tr>
<td width="200"><input type="radio" name="name1" value="a1" onclick="view(this)">Sports </td>
<td width="200"><input type="radio" name="name1" value="a2" onclick="view(this)">News </td>
<td width="200"><input type="radio" name="name1" value="a3" onclick="view(this)">Travel </td>
</tr>
<tr>
<td><div class="hide" id="choose_a1">ID content "a1" (Sports)</div></td>
<td><div class="hide" id="choose_a2">ID content "a2" (News)</div></td>
<td><div class="hide" id="choose_a3">ID content "a3" (Travel)</div></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td><input type="radio" name="name2" value="b1" onclick="view(this)">Sports 2 </td>
<td><input type="radio" name="name2" value="b2" onclick="view(this)">News 2 </td>
<td><input type="radio" name="name2" value="b3" onclick="view(this)">Travel 2 </td>
</tr>
<tr>
<td><div class="hide" id="choose_b1">ID content "b1" (Sports 2)</div></td>
<td><div class="hide" id="choose_b2">ID content "b2" (News 2)</div></td>
<td><div class="hide" id="choose_b3">ID content "b3" (Travel 2)</div></td>
</tr>
</form>
</table>
</body>
</html>
0
Digilime
Asked:
Digilime
1 Solution
 
RoonaanCommented:
Hi, you can change the if(... indexOf("choose")) to be dynamic and test for choose_a, choose_b or choose_c and leave the other sections untouched:

<html>
<head>
<title>Help me</title>

<style type="text/css">
.hide {display: none}
</style>

<script type="text/javascript">
function hideDiv(range){
tag = document.getElementsByTagName("div");
for(x=0;x<tag.length; x++){
if(tag[x].getAttribute('id').indexOf(range) != -1){
tag[x].style.display = "none";
}
}
}
function view(id){
ge = document.getElementById('choose_' + id.value);
hideDiv("choose_" + id.value.substring(0,1)); //choose_a, choose_b or choose_c
ge.style.display = "block";
}
</script>

</head>
<body>
<table>
<form name="form1" id="form1" method="post" action="">
<tr>
<td width="200"><input type="radio" name="name1" value="a1" onclick="view(this)">Sports </td>
<td width="200"><input type="radio" name="name1" value="a2" onclick="view(this)">News </td>
<td width="200"><input type="radio" name="name1" value="a3" onclick="view(this)">Travel </td>
</tr>
<tr>
<td><div class="hide" id="choose_a1">ID content "a1" (Sports)</div></td>
<td><div class="hide" id="choose_a2">ID content "a2" (News)</div></td>
<td><div class="hide" id="choose_a3">ID content "a3" (Travel)</div></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td><input type="radio" name="name2" value="b1" onclick="view(this)">Sports 2 </td>
<td><input type="radio" name="name2" value="b2" onclick="view(this)">News 2 </td>
<td><input type="radio" name="name2" value="b3" onclick="view(this)">Travel 2 </td>
</tr>
<tr>
<td><div class="hide" id="choose_b1">ID content "b1" (Sports 2)</div></td>
<td><div class="hide" id="choose_b2">ID content "b2" (News 2)</div></td>
<td><div class="hide" id="choose_b3">ID content "b3" (Travel 2)</div></td>
</tr>
</form>
</table>
</body>
</html>

-r-
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now