0

Using JQM 1.4.5.

I am trying to animate all collapsible content so they slide open and close when the header. I almost have it working with this:

$(document).on('collapsibleexpand', '.animateMe', function() {
    $("[data-role='collapsible']").collapsible({

        collapse: function( event, ui ) { 
            $(this).children().next().slideUp(150);
        },  
        expand: function( event, ui ) { 
            $(this).children().next().hide();
            $(this).children().next().slideDown(150);
        }   
    }); 
});

The problem with this code is that I have to click at least one collapsible before the animation code kicks in.

I could do something like this:

$(document).on("pageinit", "#pageA", function(){
   /* ABOVE CODE GOES HERE */
});

The problem with this solution is I have to write this code for each one of my pages. I tried the solution at JQuery Mobile Collapsable Slide Transition which my code is based on but the "pageinit" doesn't seem to work at all without giving it a page argument.

So how do I put this animation code into my js file so that it gets triggered for all collapsibles across all pages?

Community
  • 1
  • 1
StevieD
  • 6,925
  • 2
  • 25
  • 45
  • I've tried changing `pageinit` to `mobileinit` but that is not working either. – StevieD May 18 '15 at 15:31
  • OK, I see part of the problem. The code actually works with mobileinit but not on elements that are getting pulled in via ajax after mobileinit. How do I fix this? – StevieD May 18 '15 at 15:47

1 Answers1

1

You could use the create event of the collapsible widget and event delegation to make sure it runs on dynamically added collapsibles:

http://api.jquerymobile.com/collapsible/#event-create

$(document).on("collapsiblecreate","[data-role='collapsible']",  function( event, ui ) {
    $(this).collapsible({   
        collapse: function( event, ui ) { 
            $(this).children().next().slideUp(450);
        },  
        expand: function( event, ui ) { 
            $(this).children().next().hide();
            $(this).children().next().slideDown(450);
        }   
    }); 
});

Working DEMO

In my demo, I am attaching the event in the pagebeforeevent of the first page. You might be able to use mobileinit or another event as long as it runs before any non-dynamic collapsibles are initialized.

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • Bingo. You've just ended hours of frustration. – StevieD May 18 '15 at 18:30
  • I had considered the idea of binding the expand/collapses event to the ajax's calls returned html but had no idea how to do that until you told me about the create method. I was trying all kinds of crazy stuff to get this working properly. Thanks again. – StevieD May 18 '15 at 18:42
  • Hi, I'm trying to do something similar now with a button. This works but doesn't feel right: `$(document).on("buttoncreate", function( e, ui ) { $('.map_link').on('click', function(e) { e.stopPropagation(); e.stopImmediatePropagation(); }); });` I'm basically adding the same bit of code to a single class over and over. What's the proper wa to pull this off? – StevieD May 25 '15 at 01:12
  • I have a button in a collapsible header. When I tap the button, I don't want the collapsible to expand/contract so I have the `e.stopPropagation()` bits in there. The code I have there in my last cmment works. But I'm adding the code to the class `.map_link` which seems sloppy to me. – StevieD May 25 '15 at 21:52