Can the Accordion trigger text change depending on whether the parent item is open or not?

[hoggworks]

Hey all,
I'm just looking through the Radix ui documentation, which looks pretty nice. I'm looking initially at trying out the Accordion example, and the sample on the main site is impressively robust, but I'm wondering if there's a way that the AccordionTrigger element can know whether the trigger it's in is open. My usecase is as follows:

When the item is closed, I want to be able to provide a summary of the content:
Contact Options - email, sms, app

Then, when it's open, it would just look like:
Contact Options

It looks like I can use a state variable to control which item is open, but is there an onClick I can use, or something else to broadcast when the element is clicked, so I can track it externally?

Thanks!

[benoitgrelard]

Hi @hoggworks,

You should be able to achieve what you are after by using the controlled API of Accordion (value, onValueChange).
You then are the one providing the state, and can switch your text based on whether the current value is the one in each item (or contains, if you allow multiple opened at the same time).

[andy-hook]

Quick example for type="single" that I had in my pocket https://codesandbox.io/s/accordion-change-trigger-text-when-open-q0vc25?file=/App.js

[hoggworks]

Thanks very much!

…

On Jul 7, 2022, at 11:24 AM, Andy Hook ***@***.***> wrote: Quick example for type="single" that I had in my pocket https://codesandbox.io/s/accordion-change-trigger-text-when-open-q0vc25?file=/App.js <https://codesandbox.io/s/accordion-change-trigger-text-when-open-q0vc25?file=/App.js> — Reply to this email directly, view it on GitHub <#1515 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACN2M72MS2VVW4PH5ZLQF5LVS3ZDLANCNFSM525HPS4Q>. You are receiving this because you were mentioned.