Fork me on GitHub


A single content area with multiple panels, each associated with a header in a list.


For each of the widget's options the binding has a corresponding option with the same name. These can be set to static values, or bound either to normal or to observable properties of the viewmodel.

For each of the widget's events the binding has a corresponding option with the same name. These can be set to functions. When invoked the value of the this keyword evaluates to the viewmodel.


Should be bound to one of the viewmodel's observables. Every time that observable changes, the widget is refreshed (it's refresh method is invoked).


Should be bound to one of the viewmodel's writeable observables. The binding will write a jQuery object containing the binding's DOM element into it. The primary use for this option is to invoke the widget's methods on the element.

selected (jQuery UI 1.8) or active (jQuery UI 1.9+) [both are bound two-way]

Which panel is currently open.



<div data-bind="tabs: { refreshOn: items }">
  <ul data-bind="foreach: items">
    <li data-bind="attr: { 'aria-controls': id }">  
        <a data-bind="attr: { title: title, href: href }, text: title"></a>  
  <!-- ko foreach: items -->
  <div data-bind="attr: { id: id }">
    <p data-bind="text: text"></p>
  <!-- /ko -->
  <label for="newTabTitle">Title</label>
  <input id="newTabTitle" type="text" data-bind="value: newTabTitle, valueUpdate: 'afterkeydown'" />
  <label for="newTabText">Text</label>
  <input id="newTabText" type="text" data-bind="value: newTabText" />
  <button data-bind="click: onAdd, enable: newTabTitle().length">Add</button>


var counter = 0;
var ItemViewModel = function(title, text) {
  counter += 1; = 'tab' + counter.toString();
  this.href = '#tab' + counter.toString();
  this.title = title;
  this.text = text;
var ViewModel = function () {
  this.items = ko.observableArray([new ItemViewModel('Tab 1', 'Tab 1 text'), new ItemViewModel('Tab 2', 'Tab 2 text')]);
  this.newTabTitle = ko.observable('');
  this.newTabText = ko.observable('');
ViewModel.prototype.onAdd = function() {
  this.items.push(new ItemViewModel(this.newTabTitle(), this.newTabText()));