Can an accordion be used this way?

I have a situation where I would like to use an accordion to expose some additional information when expanded by the user. See example below.

Unfortunately, when expanded the content of the accordion is not visible, probably because the parent has not expanded to accomodate.

Should something like this work, if so what am I doing wrong?

If this is an inappropriate use of an accordion how would one go about accomplishing this with Elements?

1 Like

You can do this! I’ve put together an example project here that works: elementsapp://downloadDocument/14fB08GZBEMt

Hard to say what/if you are doing something “wrong” - depends on how you have created your card and what settings are applied.

Have a look at my example project and let me know if you have any questions :slight_smile:

3 Likes

That’s very cool @bon.

1 Like

@bon That does exactly what I’m after, but for some reason it is not working in my card. Here is your project with my card added, hopefully from that you can tell me where I’m going wrong. It is more complex than yours and uses a grid internally so I can pin the accordion to the bottom of the card.

elementsapp://downloadDocument/bk1s5rFFM1XZ

Had a quick look at your project and the issue you’re seeing is because there’s nothing in the Container in Preview. The Custom Component in there shows as empty in preview…

Hope that helps.

Interesting. Somewhere along the line the values were cleared from the product. Once I entered something it now works as expected.

Thanks.

Super, glad to hear it’s all working :smiley: