JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="ui-expander" data-bind="expand: true">
    <h3 class="ui-expander-head">
        <span class="ui-expander-toggle">[-]</span> Expander Title
        <input id="cbx" type="checkbox" data-bind="checked: showAll" /> <label for="cbx">Show All</label>
    </h3>
    <div class="ui-expander-content">
        Expander Content
    </div>
</div>

<div class="ui-expander" data-bind="expand: true">
    <h3 class="ui-expander-head">
        <span class="ui-expander-toggle">[-]</span> Expander Title
    </h3>
    <div class="ui-expander-content">
        Expander Content
    </div>
</div>

CSS

.ui-expander
{
    border: 1px solid #ccc;
    display: block;
    margin: 8px;
    padding: 0;
    width: 300px;
}

.ui-expander-head
{
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    margin: 0;
    padding: 4px;
}

.ui-expander-head-collapsed
{
    border-bottom: none !important;
}

.ui-expander-content
{
    margin: 0;
    padding: 4px;
}

JavaScript

ko.bindingHandlers.expand = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        if ($(element).hasClass('ui-expander')) {
            var expander = element;
            var head = $(expander).find('.ui-expander-head');
            var content = $(expander).find('.ui-expander-content');
            
            $(head).click(function () {
                $(head).toggleClass('ui-expander-head-collapsed');
                $(content).toggle();
            });
    }
    }
};

var VM = function () {
    this.showAll = ko.observable(true);
};

ko.applyBindings(new VM());