I am facing an issue with my jQuery UI accordion where the arrow icons are not behaving as expected. Each header element has a right arrow that changes to a down arrow when clicked to display content, and reverts back to its original form when clicked again.
The problem arises when the user clicks on a new section header without closing the previous one. If I click on section 1, the arrow changes correctly. However, if I then click on section 2 without closing section 1, the arrow for section 1 remains in the downward position. I need it to revert back to a right-facing arrow whenever a different section header is clicked.
Below is the script I am using:
var toggleState = true;
$("#wholesale section").on("click", function () {
if(toggleState) {
$(this).find(".dropdown-arrow").html("▼");
$(this).css("background", "#ececec");
} else {
$(this).find(".dropdown-arrow").html("►");
$(this).css("background", "#f7f7f7");
}
toggleState = !toggleState;
});