Is there a way to change the icons on a navigation button based on an attribute value using jQuery? I have a button that expands and collapses the navigation menu, and I want to toggle between left arrows and right arrows icons. I thought of achieving this by adding or removing CSS classes.
<button class="t-Button t-Button--icon t-Button--header t-Button--headerTree" aria-label="Expand / Collapse Navigation" title="Expand / Collapse Navigation" id="t_Button_navControl" type="button" aria-controls="t_TreeNav" aria-expanded="true">
<span class="fa-angle-double-left fa-lg" aria-hidden="true"></span>
</button>
$('.t-Header-controls button').on('classChange', function() {
$('.t-Header-controls button[aria-expanded="true"]').find('span').addClass('fa fa-angle-double-left fa-2x fa-lg');
$('.t-Header-controls button[aria-expanded="false"]').find('span').addClass('fa fa-angle-double-right fa-2x fa-lg');
});
I am struggling with adding and removing classes from the span element as described above. The current code is not working. Basically, I need to remove the .fa-angle-double-left class and add the .fa-angle-double-right class when the button is clicked and its attribute aria-expanded is set to "false". And vice versa when aria-expanded is set to "true."
It seems that when the side menu is expanded, the button's aria-expanded property changes to "true," and I need the icon to be left directional arrows (.fa-angle-double-left fa-lg).
When the side menu is collapsed, the aria-expanded property changes to "false," and I need the icon to be right directional arrows (.fa-angle-double-right fa-lg).
Please help me find the correct solution.