Auto-collapse collapsable containers & run queries on open

Hi!
I'm building an app with some relatively simple queries & crud operations.
The dashboard is split into two relatively distinct sections which I put into collapsible containers - so far so good.

I'm struggling to implement the following:

  • auto-collapse one of the containers: on initial load, the second container should be collapsed by default. I tried adding a temporary state but it didn't work for me.
  • the contained queries therein should only run on opening the second container to improve performance of the app (I think this would work with setting correct event_handlers on the collapsibleToggle?)
  • I would like to set anchors from the header/navigation to allow my users to jump between the containers (within the same app)

Any pinpointers are much appreciated!

Best
Luka

Hi luka,

 1) auto-collapse one of the containers
 You should be able to control this with the Show Body toggle in the layout of the Collapsible Container component. If you toggle it off, the default view of the container will be collapsed.

2) I would like to set anchors from the header/navigation to allow my users to jump between the containers (within the same app)
You should be able to use the scrollIntoView() function. You can choose the component that you want to be the anchor and run a JS query which will scroll to that component. For example. This setup will scroll the app down to the image component.\

\

2 posts were split to a new topic: Add 'Show body' toggle to mobile collapsible container component