Expand a container


I am trying to use logic with conditional renderer to replicated the expand of a container in order to show or hide a text as below:

  • Hide or show text.
    First container is the situation one that if the user is clicking on the arrow this will show the text (2d containter) and if the user click on the arrow going up this will hide the text.

  • hidding the arrow going down and showing the arrow going up.
    When the user is clicking on the arrow going down, in addition to show the text, I would like to replace this arrow with one that is going up. So If the user will click on it, it will hide the text and show the arrow going down.


The issue is that for this page I will have multiple container and how I have built it now it is working but everytime I click on one arrow of one container it is expanding all containers and showing all text. I would like to find a logic per container.

Hope this is clear

hi there, this feature, is very different, if you want the container to be a repeated item or if you need a set amount of containers.

one option to consider, is to use this ready made component.

Collapsible grouped icon list

and if you need, you could change it to your needs.

I tried to use it but I am not able to figure it how to use it. I was wondering if we can personalize them? like change the icon, title name…

you can connect data from here,

using a data connection from an api

is there a tutorial, video that can help me use it please?