jquery mobile collapsible animation with css3

it needs to be set height

HTML

<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<div data-role="collapsible-set">
<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p> 
</div>

<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
</div>

CSS

.ui-collapsible-content {
    -webkit-transition: all .5s;
    -moz-transition: all .5;
    -ms-transition: all .5;
    -o-transition: all .5;
    transition: all .5;
    overflow: hidden;
}
.ui-collapsible-content-collapsed {
    display: block;
    height: 0;
    padding: 0 16px;
}

JavaScript

/*$(document).on("pageinit", function() {
    console.log('page.init');
    $('[data-role="page"]').one('pageshow', function(e, data) {
      console.log('page.show');
        $('[data-role="collapsible"]').on('expand collapse', function() {
            $(this).find('.ui-collapsible-content').slideToggle();
            return false;
         
        });

    });

  });*/