JSFiddle - React, Tailwind, and code Playground

by tyrsius

HTML

<div data-bind="visible: welcome">
    <h1>Welcome</h1>
    <p> This is my demo of template switching with intro content. You will notice that even without Knockout running (you can disable it on the left) that this content still displays. The template below will not render unless Knockout activates it.
    </p>
<button style="display:none"  data-bind="visible: welcome, click: showTemplate">Show Template</button>
</div>

<div style="display:none" data-bind="visible: !welcome()">
    <h1>Template Loaded!</h1>
    <p>This is the ajax template demo section.
    </p>
</div>

CSS

h1 {
    font-size: 26px;
}

JavaScript

var ViewModel = function(){
    var self = this;
    self.welcome = ko.observable(true);
    self.showTemplate = function() {
        //This is where your ajax would go
        self.welcome(false);
    };
};

ko.applyBindings(new ViewModel());