JSFiddle - React, Tailwind, and code Playground

by mrfunnel

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<script src="https://github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.js"></script>
<div><span data-bind="toggle:showDetails">+</span>Heading</div>
<div data-bind="visible:showDetails">Very detailed stuff</div>

JavaScript

ko.bindingHandlers.toggle = {
        init: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor);
            $(element).text(value ? "-" : "+");
            (function () {
                ko.utils.registerEventHandler(element, 'click', function (event) {
                    var boolVal = valueAccessor();
                    boolVal(!boolVal());
                    console.log(boolVal());
                    $(element).text(value ? "-" : "+");
                });
            })();
        }
    };

var ViewModel = function() {
    var self = this;
    self.showDetails= ko.observable(false);
};

ko.applyBindings(new ViewModel());