JSFiddle - React, Tailwind, and code Playground

by sunnycpp

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div class="container-fluid" >
    <button class="btn btn-primary"  id="myButton" ng-click="buttonClicked()">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 myButton = $("#myButton");
    var myHero = $("#myHero");
    
    myButton.on("click", function() {
      isVisible = !isVisible;
      
      myHero.stop(true,false);
      if(isVisible) {
        myHero.show('slow');
        myButton.text("Hide");
      } else {
        myHero.hide('slow');
        myButton.text("Show");
      }      
    });    
  });