Two-way custom binding

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.web.min.js"></script>
<button data-bind="click: changeContentVisible">Change model value</button>

<br /><br />
<input type="text"     id="main">
    <input type="text"     id="main2">
    
<div class="sliding" data-bind="slide: contentVisible">
    <div class="title">Click here!</div>
    <div class="content">
        This is the content
    </div>
</div>

CSS

.sliding {
    border: 1px solid grey;
    display: inline-block;
    width: 200px;
}

.sliding .title {
    border-bottom: 1px solid grey;
    padding: 5px;
    background-color: grey;
    color: blue;
}

.sliding .content {
    padding: 5px;
    display: none;
}

JavaScript

jQuery(function($) {
   
    kendo.data.binders.slide = kendo.data.Binder.extend({
        init: function(element, bindings, options) {
            /* call the base constructor */
            kendo.data.Binder.fn.init.call(this, element, bindings, options);
            
            var that = this;
            /* listen for the change event of the element */
            $(that.element).on("click", function() {
                that.change(); /* call the change function */
            });
        },
        refresh: function() {
            var value = this.bindings["slide"].get(),
                content = $(this.element).find('.content');
            
            if (value) {
                content.slideDown();
            } else {
                content.slideUp();
            }
        },
        change: function() {
            var value = this.bindings["slide"].get();
            
            /* update the View-Model */
            this.bindings["slide"].set(!value);
        }
    });
    
    var viewModel = kendo.observable({
        contentVisible: false,
        changeContentVisible: function () {
            this.set('contentVisible', !this.contentVisible);
        }
    });
    
    kendo.bind(document.body, viewModel);
    
});