Question

192

display:none not working in IE7

rated 0 times [ 199] [ 7] / answers: 1 / hits: 15262 / 14 Years ago, wed, november 10, 2010, 12:00:00

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:&quot');

            document.getElementById('div2').setAttribute('style','display:none');



        }

        function displayDiv2(){

            document.getElementById('div1').setAttribute('style','display:none');

            document.getElementById('div2').setAttribute('style','display:&quot');  

        }

    </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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

taliac

Add To Favorites

Follow

Total Points: 84

Total Questions: 114

Total Answers: 114

Location: Morocco

Member since Fri, May 22, 2020

4 Years ago

answered 14 Years ago leog · Accepted Answer

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.