JQuery-Mobile collapsible slideDown effect

Question

I want to add a slideDown or slideUp effect to a div with data-role='collapsible', so it will not open at once but gradually.

I have tried this:

$('#my-collapsible').live('expand', function() {      
    $('#my-collapsible .ui-collapsible-content').slideDown(2000);
});    
$('#my-collapsible').live('collapse', function() {
    $('#my-collapsible .ui-collapsible-content').slideUp(2000);
});

But it still opens and closes without delay.

Anyone knows how should I call those slideDown and slideUp methods?

Solution 1

Live Example:

• http://jsfiddle.net/6txWy/6/
• http://jsfiddle.net/6txWy/7/

JS

$('#my-collaspible').bind('expand', function () {
    $(this).children().slideDown(2000);
}).bind('collapse', function () {
    $(this).children().next().slideUp(2000);
});

HTML

<div data-role="page">
    <div data-role="content">
        <div data-role="collapsible" id="my-collaspible">
            <h3>My Title</h3>
            <p>My Body</p>
        </div>
    </div>
</div>

Solution 2

For some reason Phill's solution didn't work in my environment, but a slightly modified version did, maybe someone will have usage of this:

$(document).on('expand', '.ui-collapsible', function() {
    $(this).children().next().hide();
    $(this).children().next().slideDown(200);
})

$(document).on('collapse', '.ui-collapsible', function() {
    $(this).children().next().slideUp(200);
});

this also works directly on all collapsible elements in jquery mobile because it uses the .ui-collapsible selector, which all collapsible elements have

Solution 3

Maybe an old question, but jQuery Mobile changed a lot since then.

Here is a working example on animating a collapsible set: http://jsfiddle.net/jerone/gsNzT/

/*\
Animate collapsible set;
\*/
$(document).one("pagebeforechange", function () {

    // animation speed;
    var animationSpeed = 200;

    function animateCollapsibleSet(elm) {

        // can attach events only one time, otherwise we create infinity loop;
        elm.one("expand", function () {

            // hide the other collapsibles first;
            $(this).parent().find(".ui-collapsible-content").not(".ui-collapsible-content-collapsed").trigger("collapse");

            // animate show on collapsible;
            $(this).find(".ui-collapsible-content").slideDown(animationSpeed, function () {

                // trigger original event and attach the animation again;
                animateCollapsibleSet($(this).parent().trigger("expand"));
            });

            // we do our own call to the original event;
            return false;
        }).one("collapse", function () {

            // animate hide on collapsible;
            $(this).find(".ui-collapsible-content").slideUp(animationSpeed, function () {

                // trigger original event;
                $(this).parent().trigger("collapse");
            });

            // we do our own call to the original event;
            return false;
        });
    }

    // init;
    animateCollapsibleSet($("[data-role='collapsible-set'] > [data-role='collapsible']"));
});

Solution 4

Here is my swing which I needed for nested stuff.

 // look for the ui-collapsible-content and collapse that
 // also need the event (which is an arg) to stop the outer expander from taking action. 
 $(document).on('expand', '.ui-collapsible', function(event) {
     var contentDiv = $(this).children('.ui-collapsible-content');
     contentDiv.hide();
     contentDiv.slideDown(300);
     event.stopPropagation(); // don't bubble up
 })

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

Solution 5

Here's jerone's excellent answer for jQuery Mobile 1.4 (event names changed slightly, data-role="collapsible-set" is now data-role="collapsibleset"):

/*\
Animate collapsible set;
\*/
$( document ).one( 'pagecreate', function() {

  // animation speed;
  var animationSpeed = 500;

  function animateCollapsibleSet( elm ) {

    // can attach events only one time, otherwise we create infinity loop;
    elm.one( 'collapsibleexpand', function() {

      // hide the other collapsibles first;
      $( this ).parent().find( '.ui-collapsible-content' ).not( '.ui-collapsible-content-collapsed' ).trigger( 'collapsiblecollapse' );

      // animate show on collapsible;
      $( this ).find( '.ui-collapsible-content' ).slideDown( animationSpeed, function() {

        // trigger original event and attach the animation again;
        animateCollapsibleSet( $( this ).parent().trigger( 'collapsibleexpand' ) );
      } );

      // we do our own call to the original event;
      return false;
    } ).one( 'collapsiblecollapse', function() {

      // animate hide on collapsible;
      $( this ).find( '.ui-collapsible-content' ).slideUp( animationSpeed, function() {

        // trigger original event;
        $( this ).parent().trigger( 'collapsiblecollapse' );
      } );

      // we do our own call to the original event;
      return false;
    } );
  }

  // init;
  animateCollapsibleSet( $( '[data-role="collapsibleset"] > [data-role="collapsible"]' ) );
} );

View more solutions

Comments

[alquatoun]

Note the JS in the fiddle is loaded at the bottom of the body, not the head.

[Candidasa]

this works great on the jQuery Mobile 1.3.1. Thanks for the updated function

[jerone]

Confirmed working with jQuery 2.0 & jQuery Mobile 1.3.1 jsfiddle.net/jerone/gsNzT/104

[Andreas Covidiot]

works (at least partially) with jQM 1.4.3 and removing [data-role="collapsibleset"] > from the init line on bottom makes it work for collapsibles (not in a set) as well - although I have a problem with nested collapsibles where it collapses again automatically - but this may be related to some other individual code/trigger in my project