JSFiddle - React, Tailwind, and code Playground

by t4gedieb

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<div class="ng-cloak" ng-app="test-me">
    <div class="page-header">
         <h1>
             <span tooltip-trigger="click" tooltip-placement="bottom" tooltip="On the Bottom">Contactlist</span>
         </h1>
    </div>
    <div ng-click="collapse = !collapse">toggle</div>
    <div class="sample-show-hide" ng-show="collapse">here i am</div>
    <div class="sample-show-hide" ng-class="{in : collapse, fade : collapse}">here i am 2 ({{collapse}})</div>
</div>

CSS

.sample-show-hide {
    padding:10px;
    border:1px solid black;
    background:white;
}
.sample-show-hide {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
}
.sample-show-hide.ng-hide {
    opacity:0;
}

JavaScript

console.log('load');
angular.module('test-me', ['ngAnimate', 'ui.bootstrap']);
console.log('end');