Working on my first HTML/CSS project, I encountered a browser compatibility challenge. The code functions well in Firefox, IE, and Edge but fails in Chrome. Specifically, I am trying to make a button display alternating up and down arrows when clicked. While I appreciate general advice on improving compatibility, for now I'll focus on this specific issue.
Initially, I sought help in achieving the arrow effect in this forum thread. The provided code came from the sole response there. You can find both the code and JSFiddle link below, with the latter demonstrating the problem - functional in Firefox but not in Chrome.
JavaScript:
function funcAbout() {
var btn = document.getElementById("undernavbtn");
btn.classList.toggle("active")
}
HTML:
<button type="button" id="undernavbtn" onclick="funcAbout()"><span>Button</span></button>
CSS:
#undernavbtn span::after {
content: " \23f6";
}
#undernavbtn.active span::after {
content: " \23f7";
}
Any suggestions on modifying this code to ensure cross-browser functionality?
Appreciate any assistance!