display:none not working in IE7

15,068

Solution 1

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.

Solution 2

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

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');

15,068

vedvrat13

I am a UI Developer and I work extensively on HTML, CSS, Javascript & JS frameworks.

Updated on June 04, 2022

Comments

vedvrat13 almost 2 years

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.

leppie over 13 years

'display:&quot' is certainly not correct. Where is the closing quote?
vedvrat13 over 13 years

'display:&quot' is similar to display:''. The purpose was to remove the display property from style of the the element.