Custom code widget interaction with neighbour widgets

Custom code
1

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).

accordeon collapsed
accordeon collapsed631×1055 11.5 KB

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.

accordeon opened
accordeon opened643×1086 12.3 KB

Please share your experience and ideas!

1 Like
2

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

3

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.

4

Gotcha!

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.

5

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

6

Not a problem per se; just how things are designed from the get-go.