Check out my code snippet:
Using Jquery:
$("#welcome-done").on("click", function(){
$(".welcome-box").toggleClass("hide");
})
In the CSS:
.hide {
display: none;
}
.welcome-box {
padding-left: 0;
background-color: white;
border-radius: 12px;
border-top: 6px solid;
border-top-color: #0072FF;
box-shadow: 0px 0px 300px 200px rgba(0,0,0,0.3);
position: absolute;
left: 50%;
top: 170px;
transform: translate(-50%);
height: 500px;
width: 50%;
max-width: 700px;
z-index: 700;
}
The code works in major browsers like Firefox, Chrome, and Safari, but fails to work in IE11. Any ideas on how to fix this compatibility issue?
UPDATE:
Even with the following code snippet adjustment, the functionality is still broken in IE11 (while it works perfectly fine in other browsers):
$("#welcome-done").on("click", function(){
$(".welcome-box").toggle();
})
LATEST UPDATE:
An error message is now showing up exclusively in the console of IE11:
SCRIPT1003: Expected ':'
File: app.js, Line: 10397, Column: 10