JSFiddle - React, Tailwind, and code Playground

HTML

<!Doctype Hmtl >
<html>
<head>
<title>Hello</title>
</head>
<body>
<button data-bind="click:toggle_func, text:button_text">Toogle Message</button>
<p data-bind="visible:showHide">
  Hello, I am Visible now!
</p>

<script type = "text/javascript"
   src = "lib/jquery.min.js"></script>
<script type = "text/javascript"
   src = "lib/knockout/knockout-3.1.0.js"></script>
<script  type = "text/javascript"  src="index.js"></script>
</body>
</html>

JavaScript

//Define your view model here with button_text('Toggle Message') and showMsg(false) as observable and  toggle_func which checks toggle flag's value and change the button to untoggle with message.
function myViewModel() {
   var toggle= true;
   this.showMsg = ko.observable(false);
   this.button_text= ko.observable('Untoggle Message');
   this.toggle_func= function(){
   this.showMsg(!this.showMsg());
   };
};
ko.applyBindings(myViewModel);