Custom animation for collapsible set not working in jQuerymobile 1.4.0

Question

I have the following collapsible set in my jQuery mobile 1.4.0 App, I need to add an animation to this collapsible set when its expanded and closed , I have tried this code and its working ok in jsfiddle ,this is my jsfiddle ,but The problem is that the animation didn't work on my app with jquery mobile 1.4.0 . How can i make this animation works on jQuery mobile 1.4.0? please help me ..

the javascript code for animation

<script>
$('document').on('pageinit',function(){    

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

 });

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



</script>

Answer 1

Given multiple countries as collapsibles (not in a set) and each country contains a collapsible set with several collapsibles. The markup looks like this:

<div data-role="content">
     <div data-role="collapsible"  data-iconpos="left"  data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="col" >
    <h3 ><div>Country 1</div></h3>

    <div data-role="collapsible-set"  data-iconpos="left"   data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="governorates"> 
        <div data-role="collapsible"  >
                <h3 class="Mycollapsible"><div style="color:white;font-weight:normal;">Governorate1</div></h3>
                <ul data-role="listview">
                    <li data-icon='false'>  <font class="NameStyle">Village1</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village2</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village3</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village4</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village5</font></li>
                </ul>
            </div>
            <div data-role="collapsible">
                <h3 class="Mycollapsible"><div style="color:white;font-weight:normal;" >Governorate2</div></h3>
                <ul data-role="listview">
                    <li data-icon='false'>  <font class="NameStyle">Village1</font> </li>
                    <li data-icon='false'>  <font class="NameStyle"> Village2</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village3</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village4</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village5</font></li>
                </ul>
            </div>
        </div>
    </div>

    <div data-role="collapsible"  data-iconpos="left"  data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="col" >
        <h3 ><div>Country 2</div></h3>
        <div data-role="collapsible-set"  data-iconpos="left"   data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="governorates"> 
            <div data-role="collapsible"  >
                <h3 class="Mycollapsible"><div style="color:white;font-weight:normal;">Governorate1</div></h3>
                <ul data-role="listview">
                    <li data-icon='false'>  <font class="NameStyle">Village1</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village2</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village3</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village4</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village5</font></li>
                </ul>
            </div>
            <div data-role="collapsible">
                <h3 class="Mycollapsible"><div style="color:white;font-weight:normal;" >Governorate2</div></h3>
                <ul data-role="listview">
                    <li data-icon='false'>  <font class="NameStyle">Village1</font> </li>
                    <li data-icon='false'>  <font class="NameStyle"> Village2</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village3</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village4</font></li>
                    <li data-icon='false'>  <font class="NameStyle"> Village5</font></li>
                </ul>
            </div>
        </div>
    </div>
</div>

In javascript, I handle the country expand/collapse separately from the second level collapsible sets by adding a class .governorates to the collapsible sets

$(document).on('pagecreate', function () {
    $(".governorates .ui-collapsible-heading-toggle").on("click", function (e) {        
        var current = $(this).closest(".ui-collapsible");
        if (current.hasClass("ui-collapsible-collapsed")) {
            $(".ui-collapsible-content", current).slideDown("fast", function () {
                current.trigger("collapsibleexpand");  
                //hide previously expanded
                $(".governorates  .ui-collapsible-content-collapsed").slideUp('fast');                    
            });
        } else {
            $(".ui-collapsible-content", current).slideUp("fast", function () {
                current.trigger("collapsiblecollapse");
            });
        }
    });

    $(".col .ui-collapsible-heading-toggle").not(".governorates .ui-collapsible-heading-toggle").on("click", function (e) {        
        var current = $(this).closest(".ui-collapsible");             
        if (current.hasClass("ui-collapsible-collapsed")) {
            $(".ui-collapsible-content", current).not(".governorates .ui-collapsible-content").slideDown("fast", function () {
                current.trigger("collapsibleexpand");  
            });
        } else {
            $(".ui-collapsible-content", current).not(".governorates .ui-collapsible-content").slideUp("fast", function () {
                current.trigger("collapsiblecollapse");
            });
        }
    }); 
});

Here is a working DEMO (Based on Omar's initial work in the OP comment thread).

Answer 2

I know an answer has already been selected, but, here I've forked ezanker's fiddle, doing the same thing, but with less code.

http://jsfiddle.net/fussycashew/EZ2Kx/

$(document).on('pageinit', 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);
        }

    });
});