Knockout binding handler: slide

slide.html

<script type="text/javascript">
    ko.bindingHandlers.slide = {
        enabled: true,
        queue: "ko.bindingHandlers.slide",
        
        init: function (element, valueAccessor) {
            var visible = Boolean(ko.unwrap(valueAccessor()));
            $(element).toggle(visible);
        },
        
        update: function (element, valueAccessor) {
            var self = ko.bindingHandlers.slide;
            var $element = $(element);
            $element.stop(self.queue, true);
            var visible = Boolean(ko.unwrap(valueAccessor()));
            if (self.enabled) {
                var slide = visible ? "slideDown" : "slideUp";
                $element[slide]({ queue: self.queue });
                $element.dequeue(self.queue);
            } else {
                $element.toggle(visible);
            }
        }
    };
</script>

<button type="button" data-bind="click: toggle">Toggle</button>
<div data-bind="slide: visible">Hello, world!</div>

<script type="text/javascript">
    function ViewModel() {
        var self = this;
        self.visible = ko.observable(true);
        self.toggle = function () {
            self.visible(!self.visible());
        };
    }
    
    ko.applyBindings(new ViewModel());
</script>