JSFiddle - React, Tailwind, and code Playground

by bombo

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.debug.js"></script>
<div>
    <a href="" data-bind="click: toggleVisible">Toggle</a>
</div>
<div data-bind="slideVisible: isVisible">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

CSS

th, td {
    width: 100px;
}

thead tr {
    border-top: 2px solid black;
    border-bottom: 1px solid black;
}

tbody {
    border-bottom: 2px solid black;
}

JavaScript

(function ($, ko) {
    $(function () {
        
        var viewModel = {
            'isVisible' : ko.observable(true)
        };
        
        viewModel.toggleVisible = function () {
            viewModel.isVisible(!viewModel.isVisible());
        };
        
        ko.applyBindings(viewModel);
        
        ko.bindingHandlers.slideVisible = {
            init: function (element) {
                //            var $element = $(element),
                //                height = $element.show().height();
    
                //            $element.hide().css('height', 0)
                //                .data('height', height);
            },
            update: function (element, valueAccessor, allBindingsAccessor) {
                // First get the latest data that we're bound to
                var value = valueAccessor(), allBindings = allBindingsAccessor(),
                    $element = $(element),
                    height, visibility,
                    makeVisible = ko.utils.unwrapObservable(value),
                    isVisible = $element.is(':visible'),
                    duration = allBindings.slideDuration || 400;
    
                if (isVisible !== makeVisible) {
                    if (isVisible) {
                        height = $element.height();
                    } else {
                        visibility = $element.css('visibility');
                        height = $element.css({
                            'visibility': 'hidden',
                            'height': ''
                        })
                            .show().height();
                        $element.hide().css('visibility', visibility);
                        if (height) {
                            $element.css('height', 0);
                        };
                    }
                    //            $element.hide().css('height', 0);
                    //                .data('height', height);
    
                    if (makeVisible...