I need to change default icons of Side navigation menu donut.
The am icon is default when menu is opened and it is changing to "cross" icon when menu is closed.
I changed span classes to display left directions icon by default:
<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>
Now it is showing "left" direction arrows when it is opened by default:
I need to change it to "right" direction arrows when button is clicked and menu is closed (assign fa-angle-double-right fa-lg classes):
I see that when Side menu is opened (expanded) then button's "aria-expanded" property changes to "true": aria-expanded="true"
At this moment I need button's icon to be "left" directional arrows - "fa-angle-double-left fa-lg" classes.
When Side menu is closed (collapsed) then button's "aria-expanded" property changes to "false": aria-expanded="false"
At this moment I need button's icon to be "right" directional arrows - "fa-angle-double-right fa-lg " classes.
I probably need some jquery code that would add /remove the classes when "aria-expanded" property changes.
What would be the best approach to achieve that?
Thank you