I am facing an issue with a website feature where there is an expanding widget area in the topbar above the header. You can check it out at this link:
After clicking the arrow to expand the area, the button changes its direction. However, when I click it again to collapse the area, the arrow does not switch back to its original position.
Despite trying various solutions related to changing classes on StackOverflow, none of them seem to work for me. The thread I referred to is here: Change an element's class with JavaScript
I need help in figuring out how to effectively switch the class from 'expand-arrow' to 'collapse-arrow' using the existing code provided below. Should I consider ditching this code and opting for something simpler or better?
CSS:
.collapse-arrow {
display: inline-block;
width: 24px;
height: 24px;
background: url('../../../images/collapse-arrow.png');
}
.expand-arrow {
display: inline-block;
width: 24px;
height: 24px;
margin-top: 5px;
background: url('../../../images/expand-arrow.png');
}
Javascript
<script language="javascript"><!-- THIS IS THE SLIDING TOP BAR -->
(function() {
var open = false;
toggle = function() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
ele.style.height = (open ? 0 : ele.scrollHeight)+"px";
document.getElementById("displayText").className =
document.getElementById("displayText").className.replace
( /(?:^|\s)expand-arrow(?!\S)/g , '' );
open = !open;
}
})();
</script>
HTML:
Button:
<a class="expand-arrow" id="displayText" href="javascript:toggle();"></a>