Bootstrap - Sideways Collapse

by dshilkret

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="left"> <table class="table table-striped">
      
        	<tr>
            <th>Name</th>
            <th>SharePoint Id</th>
            <th>Server Relative URL</th>
        	</tr>
    	
    	<tbody>
          <tr ng-repeat="x in MyData">
            <td><h4>{{x.Name}}</h4></td>
            <td><h4>{{x.UniqueId}}</h4></td>
            <td><h4>{{x.LinkingUri}}</h4></td>
          </tr>
      </tbody>
  
</table>
</div>
<button type="button" class="btn btn-primary btn-sm" 
        data-toggle="toggle" data-target="#demo">
    <i class="glyphicon glyphicon-plus"></i>
</button>
    <div class="right ">
 
    
   
      
   <!-- your widget template -->
 



<div id="demo" class="">
    
</div>













</div>
<script>
function($http,$scope){
			// var c = this;
       //c.data.loading = true;
       $http.get('url').then(function(response){
                           console.log(response);
       });

$.ajax({
    method: 'POST',
    crossDomain: true,
    url: 'https://accounts.accesscontrol.windows.net/2d94daf0-3519-4a12-bacf-9e5a9bf37417/tokens/OAuth/2',
    headers: {
        "content-type": "application/x-www-form-urlencoded"
    },
    data: {
        "grant_type": "client_credentials",
        "client_id": "12e52415-01fe-48b1-9578-1d72b0194f17@2d94daf0-3519-4a12-bacf-9e5a9bf37417",
        "client_secret": "qkiOE773*!qnqrODCRE60(^",
        "resource": "00000003-0000-0ff1-ce00-000000000000/sbrokers.sharepoint.com@2d94daf0-3519-4a12-bacf-9e5a9bf37417"
    },
    success: function(data) {
        //data.token_type returns "Bearer"
        //data.access_token returns < AccessToken >
        var btok = data.token_type + " " + data.access_token;
        $("#div1").html("<span>"+btok+"</span>");
       ...

CSS

#demo {
    -webkit-transition: width 2s ease;
    -moz-transition: width 2s ease;
    -o-transition: width 2s ease;
    transition: width 2s ease;
    
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    background: grey;
    vertical-align: top;
    line-height: 30px;
    height: 300px;

    width: 0px;
}
#demo.in {
    width: 420px;
}
.left{
  float:left;
  height:100%;
  width:400px;
  background:white;
}
.right{
  height:100%;
  width:300px;
  overflow:hidden;
  background:white;
}

html, body{
    height:100%;
}

JavaScript

$("[data-toggle='toggle']").click(function() {
    var selector = $(this).data("target");
    $(selector).toggleClass('in');
});