JSFiddle - React, Tailwind, and code Playground

by paloalto

HTML

<link rel="stylesheet" href="http://semantic-ui.com/build/packaged/css/semantic.min.css">
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<div ng-app="app">
    <div id="wrapper" ng-controller="AppController" ng-class="{showChatWraper: isChatPanelOpen}">
        
        <div id="tabBar" class="ui vertical icon menu inverted" ng-controller="TabBarController">
            <div class="item" ng-click="toggleChatPanel()" ng-class="{active: isChatPanelOpen}">Open Chat Panel</div>
            <!-- <a class="item switchChatBtn" data-tab="showChatWraper">Open Chat Panel</a> -->
        </div>
        
        <div id="chatWraper" class="ui segment">Chat Panel Opend!!</div>
        
    </div>
</div>

CSS

#chatWraper {
    display:none;
}

.showChatWraper #chatWraper{
    display:block;
}

JavaScript

angular.module('app', ['app.controllers']);

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

controllers.controller('AppController', function AppController($scope, $log, $http) {
    
    $scope.isChatPanelOpen = false;
    
    $scope.$on("toggleChatPanel", function (event, msg) {
        console.log(msg);
        $scope.isChatPanelOpen = msg;
        console.log($scope.isChatPanelOpen);
        // $scope.$broadcast("switchChatPanel-done", msg);
    });

    $scope.$watch('isChatPanelOpen', function(newVal, oldVal) {
        if(newVal){
            console.log('yeah! It is a newVal !!!');
        } else {
            console.log('still oldVal ');
        }
    });
});

controllers.controller('TabBarController', function ($scope) {
   $scope.isChatPanelOpen = false;

   $scope.toggleChatPanel = function () {
     $scope.isChatPanelOpen = !$scope.isChatPanelOpen;
     $scope.$emit("toggleChatPanel", $scope.isChatPanelOpen);
   };
   
});