Menu
Situation:- I have created a RadioButton group. When a User selects a radio button depending upon his choice the content gets displayed and the other content is removed.
Problem:- The page is working fine in all browsers except IE7. I need a solution that runs in IE7 also.
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>
Resources Referred:- http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm
I tried the approach provided in the resource, it didn't work.
Please help me to resolve this issue. Thanks in Advance.
373
You can try this instead:
To Display:
document.getElementById('element_id').style.display = 'block';
To Hide:
document.getElementById('element_id').style.display = 'none';
That should work.
195
Though I agree you should access the property using .style.display I'd like to make a note of the proper way of altering attributes on elements.
document.getElementById('div2').setAttribute('style','display:"');
This will not emulate .style.display='' as it's not proper syntax for the attribute (css) and even if that part was okay, there is only one quote, so in that mindset you'd set the display attribute equal to the rest of the entire document.
The right way to unset an attribute is using the removeAttribute function, like this:
document.getElementById('div1').setAttribute('style','display:none');
document.getElementById('div2').removeAttribute('style');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
