Solved

Show/hide DIVs (radio buttons)

Posted on 2006-06-20
1
2,379 Views
Last Modified: 2008-07-01
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
Comment
Question by:Digilime
1 Comment
 
LVL 49

Accepted Solution

by:
Roonaan earned 500 total points
ID: 16948858
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

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmakerā€¦
The viewer will learn how to dynamically set the form action using jQuery.

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question