Javascript function to animate collapsible set only works on first page?

[Jesper Simonsen]

I have been struggling with the below function, which I have tried to place in page load and also show event on every page that has a collapsible set. It work perfetly on the first loaded page with a collapsible, but on subsequent pages it does not work (on subsequent pages the collabsible will not expand).

$(document).on('expand', '.ui-collapsible', function(event) {
var contentDiv = $(this).children('.ui-collapsible-content');
contentDiv.hide();
contentDiv.slideDown(300);
event.preventDefault();
event.stopPropagation(); // don't bubble up
});

$(document).on('collapse', '.ui-collapsible', function(event) {
var contentDiv = $(this).children('.ui-collapsible-content');
contentDiv.slideUp(300);
event.preventDefault();
event.stopPropagation(); // don't bubble up
});

[Nikita]

Hello Jasper.

Please specify the place where you have added this code.

[Jesper Simonsen]

I placed it first in pageload javascript and then I tried to place it in pageshow javascript event.

[Maryna Brodina]

Hello!

Do not add JS on Load and Show events for each screen. Add the following code in a separate JS asset: pre$(document).on('collapsibleexpand', '.ui-collapsible', function(event) {
var contentDiv = $(this).children('.ui-collapsible-content');
contentDiv.hide();
contentDiv.slideDown(300);
event.preventDefault();
event.stopPropagation(); // don't bubble up
});

$(document).on('collapsiblecollapse', '.ui-collapsible', function(event) {
var contentDiv = $(this).children('.ui-collapsible-content');
contentDiv.slideUp(300);
event.preventDefault();
event.stopPropagation(); // don't bubble up
});/pre

[Jesper Simonsen]

OK I see now - as always you have been very helpful Maryna.

Sincerely
Jesper

[Jesper Simonsen]

Hi Maryna,

Your solution did not work after all - you can see the issue in this very short video: http://screencast.com/t/PQ9AqOpvMI where the animation of the collapsible is corrupted.

I have tried many other solutions proposed on the internet, but they all end out with the same result. Maby it is the way appery.io function or because the collapsible blocks are created dynamically through an appery service?

[Nikita]

Hello,

Please provide a public link to your app. We'll check it.

[Jesper Simonsen]

Hi Nikita,

The app is not public and are not supposed to be that. It is solely for internal use in our firm. So how can I provide private link or QR Code with out making it public since all your support is disposed to the public?

[Alena Prykhodko]

Jesper, you can email us on a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and provide the link there.

[Alena Prykhodko]

Hi Jesper.

Please delete. this code:

pre
$('#List_Customers_mobilecontainer [name="collapsibleblock"]').die().live({
expand: function() {
var contentDiv = $('.ui-collapsible-content', this);
contentDiv.hide();
contentDiv.slideDown(300);
},
collapse: function() {
var contentDiv = $('.ui-collapsible-content', this);
contentDiv.slideUp(300);
},
});
/pre

Instead, create new Javascript asset with the following code:

pre
$(document).on({
expand: function() {
var contentDiv = $('.ui-collapsible-content', this);
contentDiv.hide();
contentDiv.slideDown(300);
},
collapse: function() {
var contentDiv = $('.ui-collapsible-content', this);
contentDiv.slideUp(300);
},
});/pre