Accordion item title styling

[AtharvaKatre]

Currently the accordion item title only accepts string as a value for the title.
Is it possible to pass a html children object to the title such that I can pass multiple div elements with their respective classnames for applying styling?

[tcbegley]

Hi @AtharvaKatre

Unfortunately I don't believe this is currently possible in Dash because of the way that Accordion works. See this related issue.

Here's a possible workaround though using CSS ::before selector.

import dash_bootstrap_components as dbc
from dash import Dash

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                f"The content of accordion item {i}",
                title=f"#{i}",
            )
            for i in range(1, 4)
        ]
    ),
    className="p-5",
)

if __name__ == "__main__":
    app.run_server(debug=True)

and some CSS in assets/ folder

.accordion-button::before {
  content: 'Collapsible group item';
  font-weight: 700;
  color: teal;
  padding-right: 5px;
}

Here's what it looks like for me

Hope this helps.

[tcbegley]

This is now possible with the latest version of dash-bootstrap-components

pip install -U dash-bootstrap-components

import dash_bootstrap_components as dbc
from dash import Dash, html

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                f"The content of accordion item {i}",
                title=[
                    html.Span(
                        "Collapsible group item",
                        style={"color": "blue", "fontWeight": 800},
                    ),
                    html.Span(f"#{i}", className="ms-1"),
                ],
            )
            for i in range(1, 4)
        ]
    ),
    className="p-5",
)

if __name__ == "__main__":
    app.run_server(debug=True)