JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container-fluid">
    <p><b>Consecutively clicking "Manual Show" button produces bug, While toggle behaves perfectly fine in consecutive calls. Please try it. </b>

    </p>
    <button class="btn btn-primary" id="myButtonToggle" ng-click="buttonClicked()">Toggle Show</button>
    <button class="btn btn-primary" id="myButtonManual"
    ng-click="buttonClicked()">Manual Show</button>
    <div class="hero-unit" id="myHero">
         <h1>AngularJS</h1>

        <p>Dispatches an event name upwards through the scope hierarchy notifying
            the registered ng.$rootScope. Scope#$on listeners.</p>
    </div>
</div>

JavaScript

$(function () {

    var isVisible = true;
    var myButtonToggle = $("#myButtonToggle");
    var myButtonManual = $("#myButtonManual");
    var myHero = $("#myHero");

    myButtonToggle.on("click", function () {
        myHero.stop().toggle(400);
    });
    /*
  myButtonManual.on("click", function () {
    isVisible = !isVisible;
    myHero.stop();
    myButtonManual.text(isVisible ? "Manual Hide" : "Manual Show");
    if (isVisible) {
      myHero.css('display', 'none').show('slow');
    } else {
      myHero.hide('slow');
    }
  });*/
});