Problems with collaps function

Ask the community
,
1

Hey there, greetings from Germany.
I got a problem with some code for a collaps function and maybe somebody is able to help. I got some buttons which are hiding content. The content is grouped and will collapse if the site is ready. If you click the button the group will expand (or collaps again if clicked again.)

$w.onReady(function () {
$w("#groupxyz").collapse()
$w("#groupabc").collapse()
$w......
});

export function buttonxyz_click(event) {
if( $w("#groupxyz").collapsed ) {
$w("#groupxyz").expand();
}
else {
$w("#groupxyz").collapse();
}}

Here´s the image if page is loaded
Here´s the image if page is loaded1382×652 20.3 KB

1417×739 95.2 KB

So until here everything is fine and how it should be. Now i wanted to add some content to the left hand side (it is outside the dotted lines). I wanted to create a menu but it doesn´t matter what is is, i got the same problem if i insert just text or a button e.g.

1643×760 21.6 KB

What i don´t understand is why the text on the left side (which is not touching the content unter Button 1) is disturbing the collapse function so it leaves a lot of white space. The buttons should still be very close together like pic.1

Anybody got an idea how to fix that?

Thanks a lot!
klosinho

2

https://support.wix.com/en/article/wix-code-how-page-layout-is-affected-when-elements-change-size
https://www.wix.com/code/reference/$w.CollapsedMixin.html

3

You can solve it by putting the text in a transparent box and stretch the top of the box, so the top will be higher than button1.

4

Thanks for your comment. I tried it (and put some colour to demonstrate it in a picture) but it´s still not working. So the text is attached to that container-box. Did you meant something else?

1635×649 20.7 KB

5

Thank´s for replying but could you point out what you are trying to say? I guess I understand the Basics and read the articles again but could not find a solution or a explanation why the elements on the left hand side (which are not touching the content of button1 or button1 itself) are disturbing the collapse function. Without the textelements it is working.

6

@marianklose That what meant (Unless you put a shape instead of a box). Make sure the text is attached to the box (I can’t see from the picture if the box is at the back layer as it should be).
This solution worked for me (another solution that worked in my case: instead of using a box, I stretched up the text box itself by adding empty lines before the text, so the top of the textbox was above the button line. If it doesn’t work for you, maybe you’ll find something in the documentation that Givemeawhisky linked to.

7

Sorry. I see now that I was wrong and it was a coincident (so I don’t really know what did that solved the issue). :). Maybe in the documentation.

8

@jonatandor35 Thanks for your comments! I guess i figured out what kind of regularity decides if it is working or not. Your assumption that the top of the element needs to be higher than button1 was not too bad. It seems to be important that less than 50% of the text-element´s height are in the range of the collapsing element. For example: If 100px of the left-hand-sided textelement or box are in the range of the collapsing group there need to be at least 101px of the textelement or box higher than the collapsing group. So it works out fine for me to put the text-elements in a transparent box and pull the box-top high enough so more than the half is outside the range.

Thanks again for that idea!