JSFiddle - React, Tailwind, and code Playground

by pettys

HTML

<div id="my-stuff">
    
    <p>
        This block is before.
    </p>
    
    <p data-bind="visible: displayIt,
        style: { visibility: showIt() ? 'visible' : 'hidden' }">
        This one can be toggled.
    </p>
    
    <p>
        This block comes after.
    </p>
    
    <button id="ChangeDisplay" data-bind="click:changeDisplay">
        Change Display
    </button>
    <button id="ChangeVisibility" data-bind="click:changeVisibility">
        Change Visibility
    </button>
</div>

JavaScript

var model = {
    
    showIt: ko.observable(true),
    displayIt: ko.observable(true),
    
    changeDisplay: function() { model.displayIt(!model.displayIt()); },
    changeVisibility: function() { model.showIt(!model.showIt()); }
    
};

ko.applyBindings(model, document.getElementById('my-stuff'));