Solved

Show/hide DIVs (radio buttons)

Posted on 2006-06-20
1
2,386 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
website rewamp 5 65
Un-Indent Setting Notepad++ 3 35
Understanding UserAgent String 2 69
Making an unordered list with background-image responsive 8 20
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.

739 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