How can I use the concept of children to group interactive items inside an Accordion item?

Dash Python
1

I am struggling to figure out how to fit a text area and submit button inside an Accordion item.

My attempts lead to error messages that ask me…

"Did you forget to wrap multiple children in an array?"

When I try to apply what I can find about children in the documentation in ways that make sense to me, it takes me straight back to these kind of error messages: “SyntaxError: positional argument follows keyword argument.”

Can someone please explain how to apply the concept of children in an Accordion item, preferably with a text area and submit button? One working example would help me greatly.

Below, I pasted my current code which produces the “positional argument follows keyword argument” error message in reference to the lines: "item_id=“acc_textarea”,)]
), " as I tried to mark below.

I feel like I am missing something obvious. My eyes tell me I have placed the children inside a list as required.

But my eyes are a little tired at this point.

Thank you for reviewing my question.

external_stylesheets=[dbc.themes.SUPERHERO]

app = dash.Dash(external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [ html.Br(), 
      html.H4("Welcome to the Ingredible's Nutrition Assistant"),
      html.Br(),

        dbc.Accordion(
            [
                dbc.AccordionItem(
                    html.Div(children = [
                        dcc.Textarea(id='recipe-textarea', value='', style={'width': '80%', 'height': 400, 'spellCheck': True}, placeholder="Please Note: All information in brackets or parantheses will be deleted.",
                        html.Button('Submit Recipe', id='recipe-textarea-submit-button', n_clicks=0),
                        title="Step 1: Please paste your recipe content here.",
                        **item_id="acc_textarea",)]**
**                ),**
                dbc.AccordionItem(
                    "This is the content of the second section",
                    title="Item 2",
                    item_id="acc_datatable",
                ),
2

duplicate post - see

1 Like
3

This. Is. Amazing. You are brilliant.

You not only saved me hours of frustration, but you showed me how to complete the project,

I am sending you so much gratitude right now. I also spent at least an hour yesterday playing with the themes you created. It was had to pick one, but I went with Superhero.

If you ever write a book on Dash, I would buy a copy in a heartbeat.

We are super fortunate to have you around here.

Just for clarity’s sake, I assume the functions and callbacks all belong “outside” the accordion at the bottom with the sample callback in this template? And not inside the related Accordion items? Is that right?

Again, I cannot thank you enough.

Robert

4

Hi @robertpfaff Glad I could help and thanks for the kind words :blush:

Yes, the the callbacks are “outside” of the accordion. In small apps, typically all the callbacks are placed at the bottom of the app.

1 Like
5

I just finished it like a minute ago! It’s entirely functional as an accordion-based app. I need to add some bells and whistles, for sure, but it works. I am ready to deploy and make improvements online. As someone considered “legally, permanently” disabled with a neurological condition, this really is a big deal for me. Many thanks for pushing me over the finish line. :smile:

Robert

1 Like
6

Congrats! I hope you share it in the “show-and-tell” section when it’s ready :slight_smile:

1 Like