JSFiddle - React, Tailwind, and code Playground

by NinjaFish

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="alert alert-info">I am info.</div>
    <div class="alert alert-danger" data-bind="reveal: showError">I am error.</div>
    <div class="checkbox">
        <label>
            <input type="checkbox" data-bind="checked: showError" />Show error</label>
    </div>
</div>

JavaScript

(function ($) {
    ko.bindingHandlers.reveal = {
        init: function(element, valueAccessor) {
            var value = valueAccessor(),
                unwrappedValue = ko.unwrap(value);
            unwrappedValue ? $(element).show() : $(element).hide();
        },
        
        update: function(element, valueAccessor) {
            var value = valueAccessor(),
                unwrappedValue = ko.unwrap(value);
            
            unwrappedValue ? $(element).slideDown() : $(element).slideUp();
        }
    };
    
    $(document).ready(function () {
        var vm = {
            showError: ko.observable(false)
        };

        ko.applyBindings(vm);
    });
})(jQuery);