Accordion change background color

[Volk3rDE]

Hello,

How do I change the background color via CSS or JS ???

accordion-flush does not work, I've tried so much :(

greetings

[chuckrincon]

Hi there!

You could change the accordion elements background using the class bg-{color}.

Accordion Body

<div class="accordion-body bg-dark text-white">
  <strong>This is accordion body.</strong> With a dark background and white text
</div>

Accordion Button

<h2 class="accordion-header">
  <button class="accordion-button bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="true" aria-controls="collapse">
    Accordion Button With a dark background and white text
  </button>
</h2>

Or using the SASS variables.

/* Accordion Body */
$accordion-bg: #000000; // The accordion body background color
$accordion-color: #ffffff; // The accordion text color

/* Accordion Button */
$accordion-button-bg: #000000; // The accordion button background color
$accordion-button-color: #ffffff; // The accordion button text color
$accordion-button-active-bg: tint-color(#00000, 90%); // The accordion button when it is active and collapsed
$accordion-button-active-color: #ffffff; // The accordion button when it is active and collapsed

[Volk3rDE]

Hi,
So easy, thank you very much :)
And can you set your own color without SASS?
And with bg-dark the color of the icon and frame is not changed :(

[chuckrincon]

Of course, you can get the same result using simple CSS and overriding the compiled classes.

/* This modifies the accordion body background and text color */
.accordion-body {
    color: #ffffff;
    background-color: #000000
}

/* This modifies the background and text color of the button element when the accordion is close or not active */
.accordion-button {
    color: #000000;
    background-color: #ffffff;
}

/* This modifies the background and text color of the button element when the accordion is open or active */
.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #20c997;
}

/* This modifies the accordion icon color when the accordion is close or not active */
.accordion-button::after {
    /* Note the fill attribute, is used to set the icon color */
    /* Also Note that the SVG content needs to be url-escaped for this to work, e.g. # gets replaced with %23. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'><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>");
}

/* This modifies the accordion icon color when the accordion is open or active */
.accordion-button:not(.collapsed)::after {
    /* Note the fill attribute, is used to set the icon color */
    /* Also Note that the SVG content needs to be url-escaped for this to work, e.g. # gets replaced with %23. */
    background-image: url("data:image/svg+xml;utf8,<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>");
}