JSFiddle - React, Tailwind, and code Playground

by photo_tom

HTML

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

    </h3>
    <div class="ui-expander-content">
        Expander Content
    </div>
</div>

<div class="ui-expander" data-bind="expand: showAll ">
    <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();
            });
        }
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var v = valueAccessor();
        var v1 = ko.utils.unwrapObservable(v);
        if (v1) {
            var head = $(element).find('.ui-expander-head');
            var content = $(element).find('.ui-expander-content');
            $(head ).removeClass('ui-expander-head-collapsed');
            content.show();
        }
    }
};

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

ko.applyBindings(new VM());