Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am using the default Accordion of Bootstrap: https://getbootstrap.com/docs/5.0/components/accordion/

When the Accordion is active, the whole Accordion Button will change it's color.
I want to just put a small block on the left for the active Button like this:


  https://i.stack.imgur.com/48PGO.png


I saw some examples on various platforms, but most of them work with radio Buttons or other methods, I want to use the default Bootstrap accordion..
Also note: I am using the first Example.

What I have tried:

I tried to make the background color smaller and put it to the left, but that didnt work.
Posted
Updated 24-Jun-22 4:02am

1 solution

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:
CSS
.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:
CSS
.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!
 
Share this answer
 
v2
Comments
Member 14783397 24-Jun-22 10:36am    
Thank you very much, that helped me alot and you also teached me something :)
Graeme_Grant 24-Jun-22 10:40am    
Glad that I could help and show you a neat trick for rapid prototyping and debugging. ;)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900