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="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() {
      isVisible = !isVisible;      
      myHero.stop(true,false);      
      myHero.toggle('slow');
      if(isVisible) {        
        myButtonToggle.text("Toggle Hide");
      } else {
        myHero.hide('slow');
        myButtonToggle.text("Toggle Show");
      }      
    }); 
    
    myButtonManual.on("click", function() {
      isVisible = !isVisible;      
      myHero.stop(true,false);      
      if(isVisible) {        
        myHero.show('slow');
        myButtonManual.text("Manual Hide");
      } else {        
        myHero.hide('slow');
        myButtonManual.text("Manual Show");
      }      
    });    
  });