Styling Accordion Dash Bootstrap Component
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...
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:
Set the title (eg. Item 1) to H1, or something else.
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.
1 Answer
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;
}
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
