JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<label>
    <input type="checkbox" data-bind="checked: display" />
    Display message
</label>

<div id="div-one" data-bind="visible: display">
    This is some message within div-one
</div>

<!-- <div id="div-two" data-bind="if: display">
    This is some message within div-two
</div>

<div id="div-three" data-bind="ifnot: display">
    This is some message within div-three
</div> -->

CSS

body
{
    font-family: Arial;
}

div
{
    margin-top: 50px;
}

JavaScript

// Visible, if and if-not bindings

// Our viewmodel with observables
function viewmodel() {
    self = this;
    
    this.display = ko.observable(false);
}

// Runs at document load
$(document).ready(function(){
    // Create an instance of the viewmodel
    var myViewmodel = new viewmodel();
    
    // Bind the instance to the view
    ko.applyBindings(myViewmodel);
});