I have a nested accordion that resembles the following structure:
https://i.sstatic.net/HT6kS.png
However, I am seeking to align them to the right so that all collapse arrows are in line. In my Plotly Dash implementation, the code looks like this:
d = {'1': {'1.1': {'1.1.1': {}}, '1.2': {'1.2.1': {}}},
'2': {'2.1': {'2.1.1': {}}, '2.2': {'2.2.2': {}}}}
def generate_accordion(input_dictionary):
output = dbc.Accordion([], start_collapsed=True, always_open=True, flush=True)
for key, subdict in input_dictionary.items():
output.children.append(dbc.AccordionItem(generate_accordion(subdict), title=key, style={'display': 'block', 'left': '20px', 'text-align': 'center'}))
return output
Accordion_Nest = generate_accordion(d)
print(Accordion_Nest)
app = Dash(__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP, 'https://codepen.io/chriddyp/pen/bWLwgP.css'],
prevent_initial_callbacks=True
)
app.layout = html.Div(
[
Accordion_Nest,
]
)