jQuery Mobile Accordion not expanding (KnockoutJS)

Question

I'm using jQuery Mobile and KnockoutJS and can't get the Accordion widget to work. You can find an example of what I'm trying to do here: http://jsfiddle.net/NYTQC/1/. The accordion panels does not expand when clicked. Can anyone explain what I have done wrong and perhaps show how to correct the code? In my real project the observable knockout collection will be updated dynamically via a REST service depending on user actions.

<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
   <!-- ko foreach: collection -->
      <div data-role="collapsible">
         <h3><span data-bind="text: caption"></span></h3>
         <span>TODO</span>
      </div>
   <!-- /ko -->
</div>

possible duplicate of [Knockout, JQMobile, and generating a collapsible-set doesn't quite seem to work right](http://stackoverflow.com/questions/11313853/knockout-jqmobile-and-generating-a-collapsible-set-doesnt-quite-seem-to-work) — nemesv, May 22 '13 at 19:32

score 0 · Answer 1 · answered Aug 28 '13 at 10:30

I have the similar problem and found the solution in the following link

http://jsfiddle.net/MauriceG/8QGU5/show/light/

// clean up borders
collapsiblesInSet.each( function() {
    $( this ).jqmRemoveData( "collapsible-last" )
        .find( $.mobile.collapsible.prototype.options.heading )
        .find( "a" ).first()
        .removeClass( "ui-corner-top ui-corner-bottom" )
        .find( ".ui-btn-inner" )
        .removeClass( "ui-corner-top ui-corner-bottom" );
});

The code accomponied is just a portion of what is required, You just view page source of the attached link and come to your own understanding about how the solution works.

jQuery Mobile Accordion not expanding (KnockoutJS)

1 Answers1