JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body" ng-app="moduleSlidePanel" ng-controller="controllerSlidePanel" ng-click="hide()">
		<div class="wrap_news">
			<div class="slide_panel" ng-class="{'showPanel':sho, 'big': sho2}" ng-click="show($event)">
				<div class="slide_panel_inner">
					qweeeeeeeeeeeeeeeeeeee eeety<br />
					qweeeeeeeeeeeeeeeeeeee eeety<br />
					qweeeeeeeeeeeeeeeeeeee eeety<br />
					qweeeeeeeeeeeeeeeeeeee eeety<br />
					qweeeeeeeeeeeeeeeeeeee eeety<br />
					qweeeeeeeeeeeeeeeeeeee eeety<br />
					<br /><br /><br />
					
					<button class="big" ng-click="sho2 = true">раскрыть на весь экран</button>
				</div>		
			</div>						
		</div>
	</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<style>
html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img{ 
	border: none;
	margin: 0; 
	outline: none;	
	padding: 0;
}

html, body{
    height:100%;		
}

.body{	
	height:100%;	
	background: yellow;
	
	font: 14px helvetica, arial, sans-serif;	
}	
	
ul{
	list-style-type: none;
}

.clear{
	clear: both;
}	

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }

textarea{
	resize: none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
	
.hide{
	display: none;
}	

	
		
/******************************************************************************************************************************* 2.	fonts */	


/****************************************************************************************************************************** 3.	layout */	
/******************************************************************************************************************************* 5.1  */	
.wrap_news{
	position: relative;
	width: 100%;
	margin: 0 auto;
	min-height: 100%;
}
	
	.wrap_news .slide_panel{
		position: absolute;
		left: -200px;
		top: 100px;
		right: auto;
		bottom: auto;
		background: red;
		padding-right: 30px;
		width: 200px;
		overflow: hidden;
		padding-right: 30px;
		-webkit-transition: 1s linear all; /* Safari/Chrome */
		 -moz-transition: 1s linear all; /* Firefox */
		 -ms-transition: 1s linear all; /* IE10 */
		 -o-transition: 1s linear all; /* Opera */
		 transition: 1s linear all; /* Future Browsers */	
	}
	
		.slide_panel_inner{
			background: lime;
			min-height: 100%;
		}
	
	.wrap_news .slide_panel.showPanel{
		left: 0;
		right: auto;
		bottom: auto;
	}
	
	.wrap_news .slide_panel.showPanel.big{
		left: 0;
		right: 30px;
		top:...

JavaScript

var app = angular.module("moduleSlidePanel", []);

app.controller("controllerSlidePanel", function ($scope){
	//$scope.showPanel1 = false;
	
	// -------------------------------------------------------------------------------------------------- implementation ----------	
    $scope.show = function(e){
        $scope.sho = true;
		
        e.stopPropagation();
    }
    
     $scope.hide = function(e){
        $scope.sho = false;
		
        $scope.sho2 = false;
    }
	
	$scope.big = function(event){	
		console.log(444);
		

	};		
	
	// -------------------------------------------------------------------------------------------------- initialization ----------	

});