Custom code widget interaction with neighbour widgets

Hi all!
I’m experimenting with some custom code and can not figure it out.
My final goal is to implement foldable (collapse) text blocks: initially you can see several line of text with “Read more…” element below. You click on it - more text unfolds and you can see “Read less…” element to fold it back.

So, the first question: what would be the best way of implementing it?

Currently I play around with the “Accordion menu” example from the official docs. And I have an issue with that. I’ve added the code widget to the page and can see it working in the preview (see the screenshot below).

But when I unfold the menu - it overlaps with another text widget located below (see the next screenshot). How to avoid this overlapping?
I would expect that when I unfold the accordeon all other widgets located below should move down together with the accordion animation.

Please share your experience and ideas!

1 Like

There are a few accordion-related posts here; have you look there? I believe this might be the main one.

Yes, there are several posts about the accordeon/collapse menu. But my problem is different and not addressed in these posts.
I would say, my issue is more about code-widgets in general and I wasn’t able to find any similar question or comment on this forum.
This is the reason why I’ve created this post.


I do not think there is a way to push down other layers when the accordion expands; or at least not without applying some heavy coding.

yeeeeees! I’m facing the same problem.
@Readymag Does anyone know how to solve it?