Binding For-Each to JQuery Accordion

Question

I want to create an accordion UI using a for each loop. I have the following code so far...

HTML

<div id="accordion" data-bind="foreach: fixtures">
   <h3><a href="#" data-bind="text: name"></a></h3>
   <div>Information</div>
</div>

JAVASCRIPT

$("#accordion").accordion({ header: "h3", collapsible: true, active: true});

Any clues as to where this is going wrong?

Answer 1

Put inside $(document).ready(function () {...

$(document).ready(function () {
    ...
    $("#accordion").accordion({ header: "h3", collapsible: true, active: true });
});