Styling Accordion dash bootstrap component

Question

I would like to customize the tabs in the accordion bootstrap component.

This is the code:

import dash_bootstrap_components as dbc
from dash import html

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                "This is the content of the first section", title="Item 1"
            ),
            dbc.AccordionItem(
                "This is the content of the second section", title="Item 2"
            ),
            dbc.AccordionItem(
                "This is the content of the third section", title="Item 3"
            ),
        ],
        start_collapsed=True,
    ),
)

rendering this:

I hev two ajdustments I want to make:

1. Set the title (eg. Item 1) to H1, or something else.

2. When accordion is activated (open) the default color of the tab is light blue (see screenshot). I want to change this color. How?

I have tried different variations of css styling, like what is suggested here, but with no luck.

Answer 1

To adjust the Item styling, you need to change the styling for .accordion-button. To adjust the styling when opening an accordion item, you need to change the styling for .accordion-button:not(.collapsed).

Here is an example of making the "Item" text larger, and changing the color of the item on opening to red:

.accordion-button {
    font-size: xx-large;
}

.accordion-button:not(.collapsed) {
    background-color: red;
}