<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-8"> <h2>Fullscreen toggle</h2> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> <ul class="list-inline panel-actions"> <li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li> </ul> </div> <div class="panel-body"> <h3>Panel body</h3> <p>Click the resize icon in the top right to make this fullscreen.</p> <p>Click the icon again to return to the normal size.</p> </div> </div> </div> </div> </div>

.panel-actions { margin-top: -20px; margin-bottom: 0; text-align: right; } .panel-actions a { color:#333; } .panel-fullscreen { display: block; z-index: 9999; position: fixed; width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; overflow: auto; }

$(document).ready(function () { //Toggle fullscreen $("#panel-fullscreen").click(function (e) { e.preventDefault(); var $this = $(this); if ($this.children('i').hasClass('glyphicon-resize-full')) { $this.children('i').removeClass('glyphicon-resize-full'); $this.children('i').addClass('glyphicon-resize-small'); } else if ($this.children('i').hasClass('glyphicon-resize-small')) { $this.children('i').removeClass('glyphicon-resize-small'); $this.children('i').addClass('glyphicon-resize-full'); } $(this).closest('.panel').toggleClass('panel-fullscreen'); }); });