Collapse/Expand Works in Preview, Not on Live Site

Ask the community
,
1

I posted this as a discussion by accident so I reposted it as a question

Hi, I recently started experimenting with code for the first time on my website and managed to put together a collapsed slideshow that expands between two strips when a button is clicked.

It was all working perfectly in the preview but on the live site, nothing happens when the button is clicked. I’ve read through a lot of forum posts which all mention datasets, which isn’t something I’ve ever used. I don’t have any sandbox collections or datasets set up anywhere on the site.

This is the temporary url: www.shed47 .org/new-visit-page
It’s still a WIP. The ‘more info’ button is the trigger for the code.

Thanks, Aidan.

2

You describe your issue, but do not show the most important thing → the CODE!
And please, when you describe your issue, DO NOT USE ABRAVATIONS!

This forum is an international one!

Perhaps this abravations is known in England or in the U.S. ( WIP ), but i am either from England nor from the U.S. It is already difficult to understand some coding issues, and when someone uses abravations, it gets more harder to understand the issue!

I think you understand what i mean ?

Ich könnte mit dir nun auch auf Deutsch reden und du würdest rein gar nichts verstehen was ich hier gerade texte und wenn ich dann auch noch anfange Abkürzungen zu benutzen, verstehst du noch viel weniger, das gleiche könnte ich auch auf Russisch oder Französich machen und schon merkst du recht schnell wie schwierig das ganze wird. So und um das ganze jetzt noch mal zu erschweren, könnte ich nun anfangen Abkürzungen in meiner eigenen Sprache zu verwenden, wie z.B. (ja genau ich wende es bereits an).

Kommst du da noch mit?

As you can see, it gets very hard to understand, when someone starts to speak another language :grin:.

I hope you got me and understand what i wanted to tell you. THANKS!

And additional to that, also do not forget to describe your issue detailed as most as possible.

3

Hi, thanks for your reply. I forgot to add the code when I changed it to a question, sorry about that.

As for ‘WIP’, it just means ‘Work In Progress’ which isn’t too important

This is my first time using the forum so I wasn’t sure how detailed to go. Basically, I have two strips, one above the other. On the top one, there is a button which is meant to expand a collapsed slideshow beneath it, to appear between the two strips. This works perfectly in the preview of the website but when I try it on the published site, the button does nothing. I have seen a lot of mention of datasets and sandbox collections, but I have never used any of these features.

The “button” is really made up of two separate buttons and a vector. They are meant to disappear when the slideshow expands, to be replaced with a ‘minimise’ button.

Here’s the code:

let fadeOptions = {
 "duration":   500,
 "delay":      0
};

export function button17_click(event, $w) { 
      $w("#fullWidthSlides1").expand();
      $w("#fullWidthSlides1").show();  
      $w("#button17").hide("fade", fadeOptions);
      $w("#button18").hide("fade", fadeOptions);
      $w("#vectorImage1").hide("fade", fadeOptions);
      $w("#vectorImage2").show("fade", fadeOptions);
      $w("#text102").show("fade", fadeOptions);
      } 

export function button18_click(event, $w) { 
      $w("#fullWidthSlides1").expand(); 
      $w("#fullWidthSlides1").show();
      $w("#button17").hide("fade", fadeOptions);
      $w("#button18").hide("fade", fadeOptions);
      $w("#vectorImage1").hide("fade", fadeOptions);
      $w("#vectorImage2").show("fade", fadeOptions);
      $w("#text102").show("fade", fadeOptions);
      } 

export function vectorImage1_click(event, $w) { 
      $w("#fullWidthSlides1").expand(); 
      $w("#fullWidthSlides1").show();
      $w("#button17").hide("fade", fadeOptions);
      $w("#button18").hide("fade", fadeOptions);
      $w("#vectorImage1").hide("fade", fadeOptions);
      $w("#vectorImage2").show("fade", fadeOptions);
      $w("#text102").show("fade", fadeOptions); 
      } 

export function text102_click(event, $w) { 
      $w("#fullWidthSlides1").collapse();
      $w("#fullWidthSlides1").hide();
      $w("#button17").show("fade", fadeOptions);
      $w("#button18").show("fade", fadeOptions);
      $w("#vectorImage1").show("fade", fadeOptions);
      $w("#vectorImage2").hide("fade", fadeOptions);
      $w("#text102").hide("fade", fadeOptions); 
      } 

export function vectorImage2_click(event, $w) { 
      $w("#fullWidthSlides1").collapse(); 
      $w("#fullWidthSlides1").hide();
      $w("#button17").show("fade", fadeOptions);
      $w("#button18").show("fade", fadeOptions);
      $w("#vectorImage1").show("fade", fadeOptions);
      $w("#vectorImage2").hide("fade", fadeOptions);
      $w("#text102").hide("fade", fadeOptions); 
      }
4

Ok i just took the first part of your code…

let fadeOptions = {
 "duration":   500,
 "delay":      0
};

export function button17_click(event, $w) { 
      $w("#fullWidthSlides1").expand();
      $w("#fullWidthSlides1").show();  
      $w("#button17").hide("fade", fadeOptions);
      $w("#button18").hide("fade", fadeOptions);
      $w("#vectorImage1").hide("fade", fadeOptions);
      $w("#vectorImage2").show("fade", fadeOptions);
      $w("#text102").show("fade", fadeOptions);
      }

Modified it a little bit…

$w.onReady(function () {   });

let fadeOptions = {
 "duration":   500,
 "delay":      0
};

export function button17_click(event, $w) { 
//    $w("#fullWidthSlides1").expand();
//    $w("#fullWidthSlides1").show();  
    $w("#button17").hide("fade", fadeOptions);
    $w("#button18").show("fade", fadeOptions);
    $w("#vectorImage1").hide("fade", fadeOptions);
    $w("#vectorImage2").hide("fade", fadeOptions);
    $w("#text102").hide("fade", fadeOptions);
    $w("#text103").hide("fade", fadeOptions);
} 

export function button18_click(event) {
    $w("#button17").show("fade", fadeOptions);
    $w("#button18").hide("fade", fadeOptions);
    $w("#vectorImage1").show("fade", fadeOptions);
    $w("#vectorImage2").show("fade", fadeOptions);
    $w("#text102").show("hide", fadeOptions);
    $w("#text103").show("hide", fadeOptions);
}

And here the RESULT…
https://russian-dima.wixsite.com/meinewebsite/blank-18

Everything works perfectly.

There must be another problem with your code.
You have more CODE?

-Check also if there is no conflict with COLLAPSE and EXPAND!
-Check if there are situations, where you try to show() some elements, BUT the element is collapsed() !
I did not check it.

5

That isn’t really the issue I had with the code, I probably didn’t describe it well.
I’ve recorded what happens in the site preview, which works perfectly. The only place it doesn’t work is on the live published site. Hopefully this makes it clearer.

This is what should happen:

6

@aidandcrobertson
I do not understand why this should not work on your Live-Site?
-Did you published it already?
-Can you give the link of your site?

Edit: Yes you have published, i did not see that…

The only place it doesn’t work is on the live published site

7

@russian-dima
Here’s the link: (I can’t post links so you need to remove the space before “.org”)
www.shed47 .org/new-visit-page

8

@aidandcrobertson

Here’s the link: (I can’t post links so you need to remove the space before “.org”)

www.shed47 .org/new-visit-page
Yes i know that :laughing:.

Hmm, strange! But something happens when i click on the “double”-Arrow, it moves a little bit down.

Check everything one more time, if all Buttons are connected to code.
If something is overlapping?
If no invisible box is collapsed, or vice versa and makes an error.
Or even just delete somem part and recreate it again.

Also try to run the same action on a new BLANK-PAGE, what is the result?
Does it also not work ?

9

After going through every part of the code, I discovered that the following line was what was stopping it from working:

$w("#fullWidthSlides1").showNavigationButtons = false;

I removed this line and just turned off the navigation arrows using the ‘Layout’ menu and it all works perfectly. I still have no idea why this caused the issue though.

Thanks for the help russian-dima :grin:

10

No problem!
Do not forget to like it, if you really liked it :wink: