Digilime
asked on
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.getElementsByTagN
for(x=0;x<tag.length; x++){
if(tag[x].getAttribute('id
tag[x].style.display = "none";
}
}
}
function view(id){
ge = document.getElementById('c
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)">Sport
<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)">Trave
</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"> </td>
</tr>
<tr>
<td><input type="radio" name="name2" value="b1" onclick="view(this)">Sport
<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)">Trave
</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>
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.getElementsByTagN
for(x=0;x<tag.length; x++){
if(tag[x].getAttribute('id
tag[x].style.display = "none";
}
}
}
function view(id){
ge = document.getElementById('c
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)">Sport
<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)">Trave
</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"> </td>
</tr>
<tr>
<td><input type="radio" name="name2" value="b1" onclick="view(this)">Sport
<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)">Trave
</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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.