Member Avatar for joshisumitnet

Dear Friends,

The problem I am facing a that how to Hide and Unhide Div tags in IE7 and IE8?

My code is

<div>
                            <a href='javascript:void(0)' onclick='DisplayAddComment();'>
                                <img src="../images/AddComment.jpg" border="0"/>
                            </a>
                        </div>

and javaScript Function is

var m=1;
            function DisplayAddComment()
            {
                if(m==1)
                {
                    document.getElementById("dvAddComments").style.visibility="visible";
                    document.getElementById("dvAddComments").style.display="table";
                    m=0;
                }
                else
                {
                    document.getElementById("dvAddComments").style.visibility="hidden";
                    document.getElementById("dvAddComments").style.display="none";
                    
                    m=1;
                }
            }

This code is working in all most available Browsers.
Only IE creates the problem.

Thanks in Advance.

Sumit Joshi

  • 2 Contributors
  • 1 Reply
  • 1K Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

Building on 's suggestion to use CSS classes instead of flipping inline styles: hide the comment area by default in CSS, then toggle a single class to show it. That avoids a global flag, keeps presentation in CSS, and is easier to debug in IE7/8. Use display:none for hiding and display:block (or another appropriate display) for showing; visibility:hidden only preserves the element's space, while display:none removes it from layout.

/* default hidden */
#dvAddComments { display: none; }

/* visible state; zoom:1 helps trigger hasLayout in IE7/8 */
.dv-open { display: block; zoom: 1; }
function toggleComments() {
  var el = document.getElementById('dvAddComments');
  if (!el) return;
  var isOpen = (' ' + el.className + ' ').indexOf(' dv-open ') > -1;
  el.className = isOpen ? el.className.replace(/\bdv-open\b/, '').trim() : (el.className + ' dv-open').trim();
}

/* unobtrusive attach (works in modern browsers and IE8) */
var trigger = document.getElementById('addCommentTrigger');
if (trigger) {
  if (trigger.addEventListener) trigger.addEventListener('click', toggleComments, false);
  else if (trigger.attachEvent) trigger.attachEvent('onclick', toggleComments);
}

Troubleshooting notes: if IE still acts oddly, confirm a standards DOCTYPE (quicks/quirks affect IE7/8), avoid using display:table on non-table markup unless necessary, and trigger hasLayout (e.g., zoom:1 or explicit width) for elements that refuse to repaint. This approach keeps styles centralized and is robust across IE7/8 and modern browsers.

Member Avatar for Taywin

Sumit:

IE has problem with dynamic setting 'visibility' style property. What you may do is to use CSS instead.

<style type="text/css">
.showDisplay {
  display: table;
}
.hideDisplay {
  display: none;
  visibility: hidden;
}
</style>

// javascript part
...
var m=1;
function DisplayAddComment() {
  if(m==1) {
    document.getElementById("dvAddComments").className = "showDisplay"
    m=0;
  }
  else {
    document.getElementById("dvAddComments").className = "hideDisplay"
    m=1;
  }
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.