Generate dynamic collapsibles

Dash Python
1

Hey dear community,

I have a little problem with the use of collapsibles. I would like to build a page providing a list of collapsibles that each contain some data points as well as a large text.

So let’s say we have some documents saved in a database: I would like to display the title, publication date and first three pages of text.
Each doc should be displayed as a collapsible with clipped text that, when clicked, displays the complete text. I’ll attach a screenshot to illustrate it - the row of data should be the collapsible and the text on the right should be extendable.

Screenshot from 2020-05-26 16-02-12
Screenshot from 2020-05-26 16-02-121040×262 12.8 KB

Now the elements are generated depending on the number of entries I get from the database. Hence I can’t give them unique ids.

Question: Is there a way to build this list of collapsibles that contain the data and extend when I click on them? It’s rather basic but I don’t know how to do it, since Input and Output have to be fixed in advance, as far as I see it.

Here’s the code snippet that I use to create the list of elements.

html.Div([
            html.Div([
                dbc.Row([
                    html.H3('ID-Suche'),
                ]),
                dbc.Row([
                    dcc.Input(id="id_input", value="Ag", type="text", placeholder="Og1tA3IB...", debounce=True),
                ]),
                html.Div(children=[], id="id_output", style={"margin-top": "15px"}),
            ], style={"display": "block", "padding-top": "45px"})
        ])

@app.callback(
    Output('id_output', 'children'),
    [Input('id_input', 'value')],
    [State('id_output', 'children')])
def show_hide_element(id_input, children):
    children = []
    for urteil_id in urteile_df["id"]:
        if id_input in urteil_id:
            row = urteile_df[urteile_df["id"].str.match(urteil_id)]

            volltext = row["body"]

            el = html.Div(children=[
                dbc.Row([
                    dbc.Col([
                        html.Div(row["id"], style={"font-weight": "bold"}),
                    ], width=2),
                    dbc.Col([
                        html.Div(row["date"]),
                    ], width=2),
                    dbc.Col([
                        html.Div(row["gericht"]),
                    ]),
                    dbc.Col([
                        html.Pre(volltext.str[:200] + "..."),
                    ], width=6),
                ]),
                html.Hr(),
            ], style={"margin": "20px", "font-size": "12px"})
            children.append(el)
    return children

Thank you for any advice!