I'm looking at
Accordion · Bootstrap v5.0[
^] from their documentation.
If you open the browser dev tools, you can see the styling of the accordion button when it is open and closed. When open, the following classes/rules are set:
.accordion-item:first-of-type .accordion-button {
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);
}
.accordion-button:not(.collapsed) {
color: #0c63e4;
background-color: #e7f1ff;
box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}
Now you are ready to modify the default behavior.
I've set the following in the css styles in the dev tools to get what you want:
.accordion-button:not(.collapsed) {
color: #0c63e4;
background-color: #fff;
box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
border-left: 2em solid red;
}
You can see a live preview of the changes made.
Enjoy!