Call Custom Function when Accordion Expanded

[cristianr909090]

Is there any method to call function when specific accordion expanded?
Like onClick method:

<AccordionItem uuid="program1">
        <AccordionItemHeading>
                      <AccordionItemButton onClick="this.customFunction">
                               Test
                      </AccordionItemButton>
        </AccordionItemHeading>
</AccordionItem>

[mistermendez]

I was able to use AccordionItemState to do something similar:

                        <AccordionItemButton>
                            <AccordionItemState>
                                {({ expanded }) => {
                                    const state = expanded ? 'expanded' : 'collapsed';
                                    return (
                                        <button onClick={() => console.log(`hello`)}>
                                            This item is: {state}
                                        </button>
                                    );
                                }}
                            </AccordionItemState>
                        </AccordionItemButton>

[katie-day]

@cristianr909090 my understanding is there is no way to call a function from the AccordionItemButton, this is basically a <div role="button"> and can only have one onClick event which controls the toggling of this accordion item.

However, the Accordion component has an onChange prop that is invoked when items are expanded, you could give each AccordionItem a uuid and check onChange if a certain item is expanded, if so, do something.

Something like:

<Accordion onChange={ (uuids) => { console.log(uuids) }} >
                <AccordionItem uuid={uuid}>
                    <AccordionItemHeading>
                        <AccordionItemButton>
                            Button heading
                        </AccordionItemButton>
                    </AccordionItemHeading>
                    <AccordionItemPanel>Content</AccordionItemPanel>
                </AccordionItem>
</Accordion>

Reference here: https://github.com/springload/react-accessible-accordion#onchange--string--void-optional

[holloway]

Assuming this is dealt with. Please reopen if there is any issue.