In a collection, make a single container visible on click instead of making all containers vidible


I’m almost finished building our own commenting system (lot of containers, collections, items, workflows, bindings, etc … but it does all work smoothly).
There’s one last bit that I can not find the solution to implement. As you will see in the animation, we have buttons “respond” at different levels of the comments (top comments, replies). The workflow is that if the user clicks that button, it will open a Rich Text input to enable the user to write his reply.
My problem is that right now, when the user clicks the button, it opens ALL the containers that include that reply Rich Text input field (same container is opened for all the comments).

Do you have an idea how I could only show that input Rich Text for the item where I click on the button, and not for all the items?

Thanks for your help

comment-responses-showing for all items

Apparently it helps to write down the questions in the forum :wink:
I think I found a solution. I just replaced the “Reply” containers with Accordions.
I few tweaks on the style mainly to move the “cancel” button, but now it seems to work.

Anyway, if someone has an alternative solution, please let me know.

Here is the commenting system with the Accordions
comment-responses-with accordion

Best approch is to have a variable holding this information.
You can create a variable isReplyOpen, which will be an object. Then you need to have an id (can be the index or a real id is better) for each Reply button (the id of the comment for ex?)
When clicking on the button, you set isReplyOpen[id] to true. And you bind the Rich Text Input visibility to this :slight_smile: