Situation: - I created the RadioButton group. When a user selects a radio button depending on his choice, the content is displayed and other content is deleted.
Problem: - The page works fine in all browsers except IE7. I need a solution that works in IE7 too.
The code: -
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE7 Bug display:none</title>
<style>
#entireContent, #div1, #div2{
display:block;
}
</style>
<script type="text/javascript">
function displayDiv1(){
document.getElementById('div1').setAttribute('style','display:"');
document.getElementById('div2').setAttribute('style','display:none');
}
function displayDiv2(){
document.getElementById('div1').setAttribute('style','display:none');
document.getElementById('div2').setAttribute('style','display:"');
}
</script>
</head>
<body>
<div id="entireContent">
<input type="radio" name="group" value="t1" onclick="displayDiv1()">TEST 1<br>
<input type="radio" name="group" value="t2" onclick="displayDiv2()">TEST 2<br>
<div id="div1">TEST 1</div>
<div id="div2">TEST 2</div>
</div>
</body>
</html>
Estimated resources: -
http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm
I tried the approach specified in the resource, it did not work.
Please help me solve this problem. Thanks at Advance.
source
share