Home / Questions / 496581
Accepted
Guayavas
Asked: 2022-04-12 09:36:50 +0800 CST 2022-04-12 09:36:50 +0800 CST

How to change active color of a boostrap 5 accordion?

  • 772

I want to change the color of the shadow or frame that is made when I click on an accordion in bostrap 5 (I am using the version for react https://react-bootstrap.github.io/getting-started/introduction ), all the that blue color.

Inactive button: enter image description here Active button: enter image description here

As you can see when it is active everything is painted blue and I want to change it to green

My code for the accordion is this (I'm working in React):

  <Accordion>
     <Accordion.Item eventKey="0">
        <Accordion.Header>Volcanes</Accordion.Header>
           <Accordion.Body>
             *Algo aqui*
           </Accordion.Body>
     </Accordion.Item>
  <Accordion>

The style code is (I'm working with sass):

    .accordion-button {        
        background-color: #adadad;
        height: 30px;
        color: white;   
    }

    .accordion-body{
        padding: 8px 12px;
        background-color: rgb(172, 172, 172); 
    }

I have searched for information but honestly I have not been able to apply any solution, since they ask me to do it without using any jQuery.

bootstrap

1 Answers

  1. Best Answer

    To remove the margin I had to add the following lines of code (in the sass style file I was using for this class, not the bootstrap one that handles all accordions), instead you nonecan put any color you like.

    .accordion-button:is(.collapsed)::after {
        box-shadow: none;   
    }
.accordion-button:not(.collapsed)::after {
        box-shadow: none;   
    }

    don't use "focus" since it only served when it was clicked and expanded; "I clarify that this only serves to remove the margin (box-shadow) that is automatically generated when using boostrap buttons, if you want to change the background color when the accordion expands you have to add the line of background-color(inside the braces "{ }") in the part when the accordion is expanded is(.colapsed)since the color of the accordion is altered when it is expanded by default to a light blue.

    Finally, if you want to change the color of the arrow that appears next to the accordion, you have to do the following:

    //en donde esta esta linea: (AQUICOLOCAELCOLOR) tienen que colocar el color en haxadecimal sin el #
 .accordion-button:is(.collapsed)::after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23AQUICOLOCAELCOLOR'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;    
    }
//ejemplo de como colocar en color blanco la flecha
    .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;    
    }

    you have to place this line both when it opens and when it closes so that it doesn't go back to the original color in these interactions.

    • 1