JSFiddle - React, Tailwind, and code Playground

by dingen2010

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div data-bind="slideVisible: giftWrap, slideDuration:1600">You have selected the option</div>
<label>
    <input type="checkbox" data-bind="checked: giftWrap" />Gift wrap</label>

JavaScript

ko.bindingHandlers.slideVisible = {

    update: function (element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();

        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.utils.unwrapObservable(value);

        // Grab some more data from another binding property
        var duration = allBindings('slideDuration') || 400; // 400ms is default duration unless otherwise specified
        console.log(duration);

        // Now manipulate the DOM element
        if (valueUnwrapped == true) $(element).slideDown(duration); // Make the element visible
        else $(element).slideUp(duration); // Make the element invisible
    }
};


  var viewModel = {
        giftWrap: ko.observable(true)
    };
    ko.applyBindings(viewModel);