JSFiddle - React, Tailwind, and code Playground

by saidulu401

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="animateApp" class="container" ng-controller="mainController">
<header class="text-center row">
    <h1>Test<small>ngShow and ngHide</small></h1>
    <a class="btn btn-primary" href="#" ng-click="toggleBlocks()" ng-class="{ active: chooseBlock }">Toggle Choose/Details</a>
    
  </header>

  <div class="row" ng-show="chooseBlock">
    <div class="col-xs-12">
      <div class="jumbotron choose-block">
      Choose Block 
      </div>

    </div>
  </div>
  <div class="row" ng-show="detailsBlock">
    <div class="col-xs-12">
      <div class="jumbotron details-block">
      Details Block
      <a class="btn btn-success" href="#" ng-click="gridBlock = !gridBlock" ng-class="{ active: gridBlock }">Toggle Grid</a>
      </div>
    </div>
     <div class="col-xs-12" ng-show="gridBlock">
        <div class="jumbotron grid-block">
          Grid Block
        </div>
      </div>
  </div>
</div>

CSS

.choose-block,.details-block,.grid-block{
  height:100px;
  width:100%;
  background:#ccc;
}

JavaScript

var app = angular.module('animateApp',[]);

app.controller('mainController', function($scope) {
  $scope.chooseBlock = false;
  $scope.detailsBlock = false;
  $scope.gridBlock = false;
  $scope.toggleBlocks = function(){
   if($scope.chooseBlock){
     $scope.chooseBlock = false;
     $scope.detailsBlock  = true;
    }else{
      $scope.chooseBlock = true;
     $scope.detailsBlock  = false;
    }
    
  }
});