JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<label><input type="checkbox" data-bind="checked: open"> control through model</label>
<details data-bind="disclose: open">
    <summary>Open Me!</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore repellendus architecto error illum veritatis dolorem cumque optio delectus deserunt impedit at inventore quam odio ipsam suscipit provident fuga quaerat aliquid!</p>
</details>

JavaScript

ko.bindingHandlers.disclose = {
    init: function(element, valueAccessor) {
        if (element.tagName.toLowerCase() !== 'details') {
            throw "\"disclose\" binding only works on <details> tag!";
        }
        var value = valueAccessor();
        if (ko.isObservable(value)) {
            $(element).on("DOMSubtreeModified", function() {
               value($(element).prop('open'));
            });
        }
    },
    update: function(element, valueAccessor) {
        $(element).prop('open', ko.unwrap(valueAccessor()));
    }
};

$(function() {
    var vm = { open: ko.observable(true) };
    ko.applyBindings(vm);
});