Animate jquery mobile collapsible with css

Question

How to make jquery mobile collapsible content appear with animation using css transition?

.ui-collapsible {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

Not working.

Answer 1

jQuery Mobile's collapsible elements are shown and hidden by toggling display: none on the div of the collapsible content. As far as I know, all major browsers disable CSS transitions when the display property is changed.

An alternative would be overriding the default CSS of jQuery Mobile to always use display: block for the collapsible content div, and then transition on the height or opacity property (depending on whether or not the content needs to be "removed" from the layout).

I've created this jsFiddle, to demonstrate the transition using the opacity property. It is really just a matter of using the following CSS rules:

.ui-collapsible-content {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
}
.ui-collapsible-content-collapsed {
    display: block;
    opacity: 0
}

Transition using the height property is a little trickier as the content div has no set height. This fiddle does the trick (also see CSS below), but it requires setting a height on the content div. You can change the height to auto, but then the slide down effect doesn't look quite right in my opinion. Perhaps someone else knows a better method.

.ui-collapsible-content {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    height: 2em; /* or auto */
    overflow: hidden;
}
.ui-collapsible-content-collapsed {
    display: block;
    height: 0;
    padding: 0 16px;
}