Friends from SharePoint team asked my help to debug their sample site that contains the solution below provided by w3schools.com.

How TO – Clickable Dropdown

It is working well with our Google Chrome and Mozilla Firefox. However, for some reason, it works on Internet Explorer (IE browser version 11) for jsfiddle and jsdo websites but not on the sample site where they are implementing the solution. I compared the resulting HTML/CSS/Javascript from each browser and seems like there are no differences. Using the F12 debugging tool in IE, the error occurs from this:

function myFunction() {
document.getElementById(“myDropdown”).classList.toggle(“show”);
}

It shows that error occurring upon debugging is “Uncaught TypeError: Cannot set property ‘toggle’ of undefined.” but we do not encounter this on other browsers. Upon observation, we have found out that the browser is forcing itself to run the DOM in IE browser version 7 which is really odd because we are using IE browser 11.

ie7.png

So we did some research on why this is happening and apparently there is no permanent fix for this yet. We have applied this in our HTML code to just force the DOM to be ran on EDGE which supports the ‘toggle’ property. (Correct me if I’m wrong, I believe it’s supported from IE browser versions 10 and above).

Solution Reference: http://stackoverflow.com/questions/17627851/how-to-force-compatibility-mode-for-all-versions-of-ie

You can also check the comments about their explanation and why is it not recommended to use. But since we are desperate for this, we just added the solution provided anyway, and it did work!