My code is working fine on Google Chrome, but for some reason it's not functioning properly on Internet Explorer (IE). I'm using IE11 and really need this to work on all browsers.
Please help me figure out what's going wrong here.
$('.on').hide();
$('.off, .on').on('click',
function() {
$('.off, .on').toggle()
});.on {
width: 100%;
position: relative;
}
.on:before {
content:'';
position: absolute;
border-bottom: 2px solid #5092e3;
width: 100%;
transform: translateY(-50%);
z-index:0;
top:50%;
}
.off {
width: 100%;
position: relative;
}
.off:before {
content:'';
position: absolute;
border-bottom: 2px dashed #666666;;
width: 100%;
transform: translateY(-50%);
z-index:0;
top:50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="off">
      
</div>
<div class="on">
      
</div>