Why Am I Not Able To Show Or Hide In Internet Explorer 8, And How I Can Fix The Problem?

July 28, 2022 Post a Comment

I have written JavaScript code to show and hide the div. But I got stuck when it is not working in Internet Explorer 8. It is working smoothly in other browsers, like Opera, Firefo

Solution 1:

try:

var div1 = document.getElementById("div1");
if(div1.style.display=="none" || div1.style.display == ""){
  document.getElementById("div1").style.diplay = "block";
}
else{
  div1.style.display = "none";
}

Solution 2:

Try using display:

function showHideDiv()
{
    var divstyle = new String();
    divstyle = document.getElementById("div1").style.display;
    if(divstyle.toLowerCase()=="block" || divstyle == "")
    {
        document.getElementById("div1").style.display= "none";
    }
    else
    {
        document.getElementById("div1").style.display= "block";
    }
}

Solution 3:

jQuery is your best friend when working with DOM.

<style type="text/css">
  .hidden {
    visibility: hidden;
  }
</style>

<script type="text/javascript">
    $(function(){
        $('.trigger').click(function(){
            $('#div1').toggleClass('hidden');
        });
    });
</script>

<div id="div1" class="divStyle">
    <object width="300" height="300">
        <param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U"></param>
        <embed src="http://www.youtube.com/v/7_6B6vwE83U" type="application/x-shockwave-flash" width="300" height="300"></embed>
    </object> 
</div>

<center>
    <div class="trigger">Click Me For show hide</div>
</center>

Solution 4:

Your page works just fine in Firefox 4 and Internet Explorer 8 on Windows XP.

Yours: http://jsfiddle.net/mplungjan/2KZ47/

Mine: http://jsfiddle.net/mplungjan/7bxrB/

<html>
    <head>
        <title>Javascript Show Hide Div Visibility</title>

        <style type="text/css">
            .center {text-align:center}
            #div1 {visibility:visible}
        </style>

        <script language="javascript" type="text/javascript">
            function showHideDiv() {
               var div = document.getElementById("div1");
               div.style.visibility=(div.style.visibility==="visible"||div.style.visibility==="")?"hidden":"visible";
            }
        </script>
    </head>

    <body>
        <div id="div1" class="divStyle">
        ...
        </div>

        <div class="center" onclick="showHideDiv()">Click Me For show hide <div>
    </body>
</html>

Solution 5:

The respondents that have tested it all report that it works fine in their IE8. That would leave three options open:

No Doctype declaration (I'm assuming the testers put that over it manually).
It concerned an intranet site, temporarily or permanently. IE8+ has a Compatibility Mode/View (= IE7), which it defaults to in case an intranet site is requested. Exceptions are made for sites of which the URL starts with 'localhost' of '127.0.0.1', the address of the on-computer server(-simulator), if installed.
The OP had his IE8 set to 'View all sites in Compatibility Mode/View'.

Html5 Manual