"Panel - fullscreen toggle"
Bootstrap 3.3.0 Snippet by lukepzak

<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'); }); });

Related: See More


Questions / Comments:

Why this one works only for one card in layout?

How may i do to this one work at all cards in bootstrap layout?

pedroygor89 () - 5 years ago - Reply 0


Hello,

I've used this code, it's working fine. In my web page I've set the height of panel-body to 260px. How to resize the panel-body height when displayed in fullscreen.

Thanks,

imtiyaz

mimtiyaz () - 5 years ago - Reply 0


This is some great code but found it tricky to adjust with limited knowledge of jQuery.
But found solution with a little more flexibility, If you already using bootstrap 3 you may be familiar with collapse, try this:
Also it does not break html rules of multiple ids of the same name which should be unique.

CSS:
.fullscreen { display: block; z-index: 9999; position: fixed; width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; overflow: auto; }

HTML:
<div id="users-list">

</div>

JS:
$('[data-toggle="expand"]').click(function() {
$(this).closest($(this).attr('data-target')).toggleClass('fullscreen');
});

Anonymous () - 7 years ago - Reply 0


grrr, attach this text to any element you like :- data-toggle="expand" data-target="#users-list"

Anonymous () - 7 years ago - Reply 0


deleted some code, put this between the div tags.

Anonymous () - 7 years ago - Reply 0


this is brilliant

Jimmy Ilenloa () - 7 years ago - Reply 0