I created a Bootstrap 5 Accordion like here https://getbootstrap.com/docs/5.0/components/accordion/. By default, the arrows are rotated 180 degree, when the item is open (from 'v' to '^'). But I want the arrow to rotate just 90 degree (from '>' to 'v').
I tried to manipulate it by exchanging variable values:
In _variables.scss I set $accordion-icon-transform: rotate(90deg); (instead of bootstrap 5 default $accordion-icon-transform: rotate(-180deg) !default;)
and I exchanged the arrow svg from a 'v' (bootstrap 5 default) to a '>'
The outcome is, that on first page load, the arrows look like 'v' (I want a '>'). When I open the accordion item, it shows a 'v' (correct). Then I close it and the arrow looks like desired '>'. But I want the arrow to show '>' with the first page load.
Is there a way to achieve this, only by manipulating the bootstrap variables? Or do I have to write some extra JS on top of collapse.js?
Now, I found a solution with pure CSS: In my custom style.scss, I added:
.accordion-button&[aria-expanded="false"]::after {
transform: none;
}