Solved

Show/hide DIVs (radio buttons)

Posted on 2006-06-20
1
2,377 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Example unit tests with AngularJS 3 45
manage footer size 4 51
move expression web site to a new server 12 29
ajaxSubmit is giving me an error 1 35
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 …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will learn how to count occurrences of each item in an array.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

785 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