Cds-Accordion event for Collapse and Expand

[KishanRavindran]

Hi All,
I am currently using cds-accordion from clarity core in my angular project. I am iterating the accordion using ngfor and displays based on the data.
But I need to know which accordion is been opened as I have logic on hiding certain content when the accordion is been expanded which I am able to do it in the header but if I select the second accordion I have to reset the first one to show the hidden content of the first one.

Note I am using expandedChange event also I not able to find the panel id or number.

Thanks in advance

[mathisscott]

Hi @KishanRavindran

The expandedChange event is a custom event but it is still a normal DOM event like you would see in vanilla Javascript. This means that all these events include a target. The target of the expandedChange events are the panels that are being open and closed.

Here's more info on Javascript event targets.

And here is an example of how those work with the accordion panel's expandedChange event from the Clarity Core documentation.

The code here is looking for an event target with an id of "async"...

https://github.com/vmware/clarity/blob/407e3c9307f00643d870d87338ecce0dc4833568/packages/core/src/accordion/accordion.stories.ts#L104

...and here is the accordion panel with id="async"...

https://github.com/vmware/clarity/blob/407e3c9307f00643d870d87338ecce0dc4833568/packages/core/src/accordion/accordion.stories.ts#L188

[KishanRavindran]

Thank you @mathisscott for answering my question.