Data-binding options:

• disabled
• requireOpenedPane
• selectedIndex

Example:

In this example, the ViewModel is defined specifically for use with the accordion. It has disabled, requireOpenedPane and selectedIndex properties that are bound in the View. If any of these values change, then the widgets automatically respond to them. The widgets also update the ViewModel values as they modify them. For example, as the user clicks to select different panes, the selectedIndex value in the ViewModel updates automatically.

Create a ViewModel:

var viewModel = function () {
      var self = this;
      self.disabled = ko.observable(false);
      self.requireOpenedPane = ko.observable(false);
      self.selectedIndex = ko.observable(0);
};

Create View with bound controls:

<div data-bind="wijaccordion: {

    disabled: disabled, 

    requireOpenedPane: requireOpenedPane, 

    selectedIndex: selectedIndex}">
    <div>
        <h3>
            <a href="#">First</a></h3>
        <div>
            <p>
                First Pane
            </p>
        </div>
    </div>
    <div>
        <h3>
            <a href="#">Second</a></h3>
        <div>
            <p>
                Second Pane
            </p>
        </div>
    </div>
</div>