Expand and collapse strip [SOLVED]

Ask the community
,
1

Hi,
I have a button with property name submitstrategies.
This button is above a strip on my page.

I have another button inside the strip with property name closestrategies.
This button is inside the strip itself.

When someone clicks on the submitstrategies button I want the strip to expand and fade-in, and when they click on the closestrategies button I want it to collapse back in.

export function submitstrategies_click(event, $w) { 
      $w("#strategiespanel").expand(); 
      $w("#strategiespanel").show("FadeIn"); 
      } 
export function closestrategies_click(event, $w) { 
      $w("#strategiespanel").collapse(); 
      $w("#strategiespanel").hide("FadeOut"); 
      }

My questions are:

  1. Although the strip is hidden and collapsed on load, still the location of the strip on page load is a ‘white space’ where the strip area is, shouldn’t this space be gone (collapsed) ?

  2. The code isn’t working, the strips do not show/hide when the button is clicked. (clicking the button DOES anchor me to the location of the strip).

Can anyone help me resolve this?

2

Hi Yafim!

Please provide us with a link to your site so we can look into it.
Thanks!

Doron. :slight_smile:

3

Hi Doron,
I can’t provide the link because the site isn’t ready to be published yet… I contacted Wix Support but they redirected me here… :confused:

What can I do?

4

Hi Yafim!

Wix workers can view and inspect your editor even if the site is not published.
Post a link of the editor and know that only Wix workers can enter it.

Doron. :slight_smile:

5

Hi Doron,
Thanks, I published it to show you the information. The page:
https://yafimski.wixsite.com/paragraph3-ver4/submit

shows the issue at hand, I hope it’s clear enough.

Can you help?

6

Hi Yafim!

After looking into your site I found that the issue might be a bug on our side.
We are looking into it and I’ll be glad to update you as soon as we’ll have a solution for you!

Doron. :slight_smile:

7

Thank you for the help Doron, I will wait for your update.

8

Hi Yafim!
So here is answers on your questions:

  1. The reason for the space is the 70/10 rule with collapse.

Lets assume we have two elements A and B, one above the other (A above B). If the distance between A and B is up to 70px, when A collapse, B will move up to fill the space If the distance between A and B is over 70px, when A collapse, B will not move up. In your case, the distance between the end of the page content and the site footer is 93px, which is above the 70px threshold and thats why the footer does not move up. 2. Name of the buttons in the Property panel is wrong.

  1. You have different name of the onClick function in the Properties panel and in you Page Code.
    Please, re-check them and make sure they are the same.

Thanks,
Maria

9

Thanks Maria!

Everything was solved except that now I have an unusually spacious footer, which probably also is due to some spacing issues. Any hints for that?

10

Hi Yafim,
I assume footer behavior also relates to the 70/10 rule.
Try to move your components and see if it looks better

11

Hi Maria,
Sadly the 70/10 rule isn’t the reason. There must be something else though I can’t see it…

12

Thanks Nithin!
The Footer was the issue, specifically I double clicked it’s tag to ‘zero’ the page height.

13

I had the same problem. After about an hour here I was I found that worked. To make sure the Footer moves up, make sure you have it “sent to back”. Right click Footer. Select “arrange” then click “send to back” that should fix the problem.