JSFiddle - React, Tailwind, and code Playground

by Halcyon

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="text1" class="text" data-bind="if: showHide1">Text 1</div>
<div id="text2" class="text" data-bind="if: showHide2">Text 2</div>
<div id="text3" class="text" data-bind="if: showHide3">Text 3</div>
<br />
<br />
<button id="button1" type="button" data-bind="click: toggle1">Button 1</button>
<button id="button2" type="button" data-bind="click: toggle2">Button 2</button>
<button id="button3" type="button" data-bind="click: toggle3">Button 3</button>

CSS

.text { background-color: lightgray; }

JavaScript

$(document).ready(function () {
    var viewModel = {
        showHide1: ko.observable(false),
        showHide2: ko.observable(false),
        showHide3: ko.observable(false),
        toggle1: function () {
            this.showHide1(true);
            this.showHide2(false);
            this.showHide3(false);
        },
        toggle2: function () {
            this.showHide1(false);
            this.showHide2(true);
            this.showHide3(false);
        },
        toggle3: function () {
            this.showHide1(false);
            this.showHide2(false);
            this.showHide3(true);
        },
    };

    ko.applyBindings(viewModel);
});