0

I created a Collapsible set using jQuery mobile . It is working fine but it is not smooth like Accordion in Jquery UI. When i tap on header it expands with a jerk.

Is there any way to make it smooth?

Sundeep Saluja
  • 1,089
  • 2
  • 14
  • 36
  • Omar's answer is good. If you also want the option of having more than one collapsible open at a time, look at my answer here: http://stackoverflow.com/questions/23566967/jquerymobile-1-4-2-animate-collapsible/23568021#23568021 both options are possible. – ezanker Sep 12 '14 at 16:20

1 Answers1

1

Attach a click listener to collapsible's heading .ui-collapsible-heading-toggle. Once clicked, .slideDown() or .slideUp() based on whether the clicked collapsible is collapsed or expanded. When expanding a collapsible, other ones will be collapsed, i.e. only one collapsible should be expanded a time.

$(".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(300);
        current.siblings(".ui-collapsible:not(.ui-collapsible-collapsed)").find(".ui-collapsible-content").slideUp(300);
    } else {
        $(".ui-collapsible-content", current).slideUp(300);
    }
});

Demo

Omar
  • 32,302
  • 9
  • 69
  • 112