Forum | Appery.io

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
});

Hello Jasper.

Please specify the place where you have added this code.

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

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

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

Sincerely
Jesper

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?

Hello,

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

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?

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

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